Bootstrap JS 模态框
JS 模态框 (modal.js)
模态框插件是一个对话框/弹出窗口，显示在当前页面之上。
有关模态框的教程，请阅读我们的 Bootstrap 模态框教程。
模态框插件类
| 类 | 描述 |
|---|---|
| .modal | 创建一个模态框 |
| .modal-content | 使用边框、背景颜色等样式正确地设置模态框。使用此类添加模态框的标题、主体和页脚。 |
| .modal-header | 定义模态框标题的样式 |
| .modal-body | 定义模态框主体的样式 |
| .modal-footer | 定义模态框页脚的样式。**注意：**默认情况下，此区域右对齐。要更改此设置，请使用 text-align:left|center 覆盖 CSS |
| .modal-sm | 指定一个小模态框 |
| .modal-lg | 指定一个大模态框 |
| .fade | 添加淡入淡出动画/过渡效果，使模态框淡入淡出 |
通过 data-* 属性触发模态框
在任何元素中添加 data-toggle="modal" 和 data-target="#modalID"。
**注意：**对于 <a> 元素，省略 data-target，而使用 href="#modalID" 代替
示例
<!-- 按钮 -->
<button type="button" data-toggle="modal" data-target="#myModal">打开模态框</button>
<!-- 链接 -->
<a data-toggle="modal" href="#myModal">打开模态框</a>
<!-- 其他元素 -->
<p data-toggle="modal" data-target="#myModal">打开模态框</p>
自己尝试 »
通过 JavaScript 触发
使用以下代码手动启用
模态框选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-，例如 data-backdrop=""。
| 名称 | 类型 | 默认值 | 描述 | 尝试一下 |
|---|---|---|---|---|
| backdrop | 布尔值或字符串“static” | true | 指定模态框是否应具有暗色遮罩
如果指定的值为“static”，则单击模态框外部时无法关闭模态框 |
使用 JS 使用 data |
| keyboard | 布尔值 | true | 指定模态框是否可以使用 Escape 键 (Esc) 关闭
|
使用 JS 使用 data |
| show | 布尔值 | true | 指定初始化时是否显示模态框 | 使用 JS 使用 data |
模态框方法
下表列出了所有可用的模态框方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .modal(options) | 将内容激活为模态框。有关有效值的详细信息，请参见上面的选项 | 尝试一下 |
| .modal("toggle") | 切换模态框 | 尝试一下 |
| .modal("show") | 打开模态框 | 尝试一下 |
| .modal("hide") | 隐藏模态框 | 尝试一下 |
模态框事件
下表列出了所有可用的模态框事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| show.bs.modal | 在即将显示模态框时发生 | 尝试一下 |
| shown.bs.modal | 在模态框完全显示后发生（在 CSS 过渡完成之后） | 尝试一下 |
| hide.bs.modal | 在即将隐藏模态框时发生 | 尝试一下 |
| hidden.bs.modal | 在模态框完全隐藏后发生（在 CSS 过渡完成之后） | 尝试一下 |
更多示例
登录模态框
以下示例创建了一个用于登录的模态框
示例
<div class="container">
<h2>模态框登录示例</h2>
<!-- 使用按钮触发模态框 -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">登录</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 模态框内容-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> 登录</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> 用户名</label>
<input type="text" class="form-control" id="usrname" placeholder="输入邮箱">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> 密码</label>
<input type="text" class="form-control" id="psw" placeholder="输入密码">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>记住我</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> 登录</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 取消</button>
<p>还不是会员？<a href="#">注册</a></p>
<p>忘记<a href="#">密码？</a></p>
</div>
</div>
</div>
</div>
</div>
自己尝试 »
