Bootstrap JS 插件
JS Modal (modal.js)
Modal 插件是一个对话框/弹出窗口，显示在当前页面的最上层。
学习更多的 Modal 知识, 请访问本站的 Bootstrap 模态框教程。
Modal 插件类
| 类 | 描述 |
|---|---|
| .modal | 创建一个模态框 |
| .modal-content | 使用 border、background-color 等正确设置模态框的样式。使用此类添加模态框的页眉、正文和页脚。 |
| .modal-header | 定义模态框标题的样式 |
| .modal-body | 定义模态框正文的样式 |
| .modal-footer | 定义模态框页脚的样式。 备注: 这个区域默认左对齐。要改变默认值可以使用 CSS 的 text-align:left|center |
| .modal-sm | 指定一个小模态框 |
| .modal-lg | 指定一个大模态框 |
| .fade | 添加动画/过渡效果，使模态框淡入淡出 |
通过 data-* 属性来触发模态框
向元素添加 data-toggle="modal" 和 data-target="#modalID"。
备注: 对于 <a> 元素，省略 data-target，改为使用 href="#modalID":
实例
<!-- Buttons --><button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button><!-- Links --><a data-toggle="modal" href="#myModal">Open Modal</a><!-- Other elements --><p data-toggle="modal" data-target="#myModal">Open Modal</p>
通过 JavaScript 触发
手动:
实例
$("#myModal").modal()
Modal Options
Options 可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到 data-，如 data-backdrop=""。
| 名称 | 类型 | 默认 | 描述 | 试一试 |
|---|---|---|---|---|
| backdrop | 布尔值或者字符串 "static" | true | 指定模态框是否具有一个暗层:
如果您指定值为 "static", 在模态框外区域单击时不会关闭模态框 | 使用 JS 使用 data |
| keyboard | boolean | true | 指定按下 escape (esc) 键时是否关闭模态框:
| 使用 JS 使用 data |
| show | boolean | true | 指定在初始化时是否显示模态框 | 使用 JS 使用 data |
Modal 方法
下表列出了所有可用的 Modal 方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .modal(options) | 将元素激活为模态框。有关有效值，请参见上面的选项 | 试一试 |
| .modal("toggle") | 切换模态框 | 试一试 |
| .modal("show") | 打开模态框 | 试一试 |
| .modal("hide") | 隐藏模态框 | 试一试 |
Modal 事件
下表列出了所有可用的 Modal 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.modal | 在即将显示模态框时发生 | 试一试 |
| shown.bs.modal | 在模态框完全显示时发生（CSS 过渡完成后） | 试一试 |
| hide.bs.modal | 在模态框即将隐藏时发生 | 试一试 |
| hidden.bs.modal | 在模式框完全隐藏时发生（CSS 过渡完成后） | 试一试 |
更多实例
登录模态框
下面的实例为登录创建一个模态框:
实例
<div class="container"><h2>Modal Login Example</h2><!-- Trigger the modal with a button --><button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button><!-- Modal --><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4></div><div class="modal-body"><form role="form"><div class="form-group"><label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label><input type="text" class="form-control" id="usrname" placeholder="Enter email"></div><div class="form-group"><label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label><input type="text" class="form-control" id="psw" placeholder="Enter password"></div><div class="checkbox"><label><input type="checkbox" value="" checked>Remember me</label></div><button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</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> Cancel</button><p>Not a member? <a href="#">Sign Up</a></p><p>Forgot <a href="#">Password?</a></p></div></div></div></div></div>