boostrap-非常好用但是容易让人忽略的地方【1】：modal

 

使用bootstrap框架好久了，在开发中也用到了或者遇到了很多的问题，所以跟大家分享一下

 

bootstrap modal 组件的样式

.modal-lg    

.modal-sm

说明：这个是bootstrap3.1.0加入的。主要是调节modal弹出框的大小

bootstrap modal 组件的控制

keyboard

　　说明：

data-keyboard="false"　　点击键盘Esc键对话框不退出

data-keyboard="true"　　(默认值)点击键盘Esc键对话框退出

使用：

方式一

<div class="modal fade" role="dialog" id="shopGroupModal" aria-labelledby="shopGroupModalLabel" aria-hidden="true" data-keyboard="false" >

　　

方式二

$(function () {
     $('#myModal').modal({
        keyboard:true
    })

});    

　　

backdrop="static"

说明：

data-backdrop="false"　　不显示灰色遮罩层

data-backdrop="true"　　（默认值）显示灰色遮罩层，点击灰色遮罩层对话框消失

data-backdrop="static"　　显示遮罩层，点击灰色遮罩层对话框不消失

使用

方式一

<div class="modal fade" role="dialog" id="shopGroupModal" aria-labelledby="shopGroupModalLabel" aria-hidden="true" data-backdrop="static">

方式二

$(function () {
     $('#myModal').modal({
      backdrop:'static'
    })

});