JS模态(modal.js)
模态插件是显示在当前页的顶部的对话框/弹出式窗口。
对于有关情态动词的教程，请阅读我们的Bootstrap模态教程 。
模态类插件
| 类 | 描述 |
|---|---|
| .modal | 创建一个模式 |
| .modal-content | 样式模态与边框，背景颜色等，正确地使用这个类来添加模式的标题，正文和页脚。 |
| .modal-header | 定义样式模态的头 |
| .modal-body | 定义样式模态的身体 |
| .modal-footer | 定义的模式页脚的样式。 注：该区域是右对齐默认情况下。 要改变这一状况，覆盖与文本对齐的CSS：左|中心 |
| .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
与手动启用：
模式选项
选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到数据- ，如data-backdrop=""
| 名称 | 类型 | 默认 | 描述 | 尝试一下 |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | 指定模式是否应该有一个黑暗的叠加：
如果您指定的值"static" ，它是不可能的点击它外面时，关闭模式 | 使用JS 使用数据 |
| keyboard | boolean | true | 指定是否模态可以用ESC键关闭(Esc)
| 使用JS 使用数据 |
| show | boolean | true | 指定初始化时是否显示模态 | 使用JS 使用数据 |
模态法
下表列出了所有可用的模式方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .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>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">×</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> 试一试»