模态框----Bootstrap Modals基础使用详解

最近项目中用到了Bootstrap模态框，收录下来：

一、引用的文件

前提是需要引用jquery哦：

二、举例样式

三、html引用规则

 

class="modal fade" id="dia_delay" tabindex="-1" aria-hidden="true" data-width="700px">

"modal-title black">
   
        class="modal-close">
   

   

 
   

       
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             

： 

class="modal-footer">

   
   

解释

代码	解释
div id="example"	分配给相关 div 的 id，id 的值指向后边要实现 modal（模态框）的 JavaScript。
class="modal hide fade in"	Bootstrap CSS 的四个 class - modal、hide、fade 和 in，用于设置 modal（模态框）的布局。
style="display: none;	用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
	modal-header 适用于定义模态窗口标题样式的 class。
a class="close"	CSS class close 用于设置模态窗口关闭按钮的样式。
data-dismiss="modal"	data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。
class="modal-body"	modal-body 是 Bootstrap 的一个 CSS class，用于设置模态窗口主体的样式。
class="modal-footer"	modal-footer 是 Bootstrap 的一个 CSS class，用于设置模态窗口尾部的样式。
class="btn btn-success"	CSS class btn 和 btn-success 用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap 按钮代替。
class="btn"	Bootstrap CSS 的 按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。
data-dismiss="modal"	HTML5 定制的 data 属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal"	HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。
class="btn btn-primary btn-large"	设置按钮样式，点击该按钮则创建模态窗口。
	引用 Jquery 文件。
	引用 bootstrap modal（模态框）的 JS 文件。

注释：实际中不同的模态框的长宽是不一样的，在class="modal"的div中设置data-width/data-heigth是整个模态框的。而内容对应显示时要对应设置class="modal-body"的heigth值。

四、js操作

如果设置了modal的display:none.那么起初是看不到该模态框的。

使用

$("#dia_delay").modal('show'); 来打开模态框。

五、对于模态框的按钮监

不同的按钮可以设置监听事件好了