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);
    })

hide的话，就找不到谁触发modal的元素

　　

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

 

传参可以通过data-或者option

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

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

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

show：模态框初始化之后就立即显示出来。  也很有用，再加某个条件才能show；如果一个modal是否立即显示 是唯一的，才可以这样用；如果一个按钮，点击之后，还要判断是否触发，就不能在modal上设置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：从远端的数据源加载完数据之后触发该事件。

 

如果想点击modal中的按钮，触发一定的事件，只能自己添加了。因为唯一的操作hide，不能区分是否要上传文件。

官网写的是，show之后传参和识别事件源；现在我想hide之后识别事件源，应该只能自己找了。