Bootstrap Modals (模态框属性参照)

代码                                                    解释
.modal                               用来把 <div> 的内容识别为模态框
.fade                                当模态框被切换时,它会引起内容淡入淡出。
.hide                                隐藏模态框
.in                                  表示首选的内容默认显示
div id="example"                     分配给相关 div 的 id,id 的值指向后边要实现 modal(模态框)的 JavaScript。
style="display: none";               用于保持模态窗口可见,直到触发器触发(比如点击相关按钮)。
aria-labelledby="myModalLabel"       该属性引用模态框的标题。
aria-hidden="true"                   用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
data-show="true"                     是设置在你页面初始化的时候是否显示弹出窗,你设置为true的话就直接显示出来
data-toggle="modal"                  是一个自定义的 HTML5 data 属性 。用于打开模态窗口。
data-dismiss="modal"                 是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。 
data-keyboard="false"                当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
data-backdrop="static"               指定一个静态的背景,当用户点击模态框外部时不会关闭模态框
class="modal hide fade in"           Bootstrap CSS 的四个 class - modal、hide、fade 和 in,用于设置 modal(模态框)的布局。
class="close"                        close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式
class="modal-header"                 modal-header 适用于定义模态窗口标题样式的 class。
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,用于在模态窗口的尾部创建一个小号的按钮。
class="btn btn-primary btn-large"    设置按钮样式,点击该按钮则创建模态窗口。
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/1.7.1/jquery.min.js"></script>    引用 Jquery 文件。
<script src="../bootstrap/twitter-bootstrap-v2>
/js/bootstrap-modal.js"></script>    引用 bootstrap modal(模态框)的 JS 文件。

 

posted @ 2021-06-10 10:58  隔层云码  阅读(512)  评论(0)    收藏  举报