BootStrap JavaScript插件-模态框

模态框 modal.js

语法:

$('#myModal').modal(options)

options:

模态框参数

参数	类型	默认值	描述
backdrop	boolean 或 字符串 'static'	true	包括模态- backdrop元素。另外，指定静态for a backdrop which不关闭主模态我们点击。
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框
show	boolean	true	模态框初始化之后就立即显示出来。

Eg:   .modal(options)

$('#myModal').modal({
  keyboard: false
});

$( '#myModal').modal({
   backdrop:true;
   keyboard:true;
   show:true;
}); 

<pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">) //手动打开或关闭模态框
</span></code><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)  //</span></code><code class="js"><span class="p">手动打开或关闭模态框</span></code><code class="js"><span class="p"></span></code><code class="js"><span class="p"></span></code><code class="js"><span class="nx">
$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)   //隐藏</span></code><code class="js"><span class="p">模态框</span></code><code class="js"><span class="p"></span></code><code class="js"><span class="p"></span></code><code class="js"><span class="p">
</span></code>

事件( Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码)

事件类型	描述
show.bs.modal	show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal	hide 方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

$('#myModal').on('hide.bs.modal', function (e) {
  // do something...
})