bootstrap modal

标签：

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。加modal-lg,加modal-sm,不加也可以，共有三种尺寸。

触发方式，data-target, 感觉比js得好用

触发modal的元素，给modal传值：可传多个值

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-user=‘sfp‘ data-name=‘hh‘>
      Launch demo modal
    </button>

$(‘#myModal‘).on(‘show.bs.modal‘, function(event){
      var button = $(event.relatedTarget);
      var user = button.data(‘user‘);
      var name = button.data(‘name‘);
      console.log(user);
      console.log(name);
    })

button 中也可以通过href来触发，不过一般不会这么写　

传参可以通过data-或者option

backdrop:static,点击遮罩层，模态框不会被关闭

backdrop:false，遮罩层，不会变灰

keyboard：键盘上的 esc 键被按下时关闭模态框。

show：模态框初始化之后就立即显示出来。  也很有用，再加某个条件才能show

remote：如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>　　

方法：

.modal(‘toggle‘)：在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。
.modal(‘show‘):在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）。
.modal(‘hide‘):在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。
.modal(‘handleUpdate‘):modal open，height change,readjust modal‘s position.

事件：

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

bootstrap modal

标签：

原文地址：http://www.cnblogs.com/wang-jing/p/4773293.html