Bootstrap实现模态盒效果

1.Modal是覆盖父窗体的子窗体。通常，目的是显示来自单一来源的内容，并且可以在不离开父窗体的情况下进行一些交互。子窗体可以提供信息、交互等。

第二，如果要单独引用插件的功能，需要引用modal.js或者可以引用bootstrap.js或者bootstrap.min.js的压缩版本

介绍后直接代码示例：

！doctype HTML HTML Head metharset=' UTF-8 ' Title Bootstrap Instance-Modal插件/Title Link Rel=' Style Sheet ' href=' https://CDN.staticfile.org/Twitter-Bootstrap/3 . 3 . 7/CSS/Bootstrap . min . CSS ' Rel=' external no follow ' Script src=' http :https://cdn . static file . org/jquery/2 . 1 . 1/jquery . min . js '/Script src=' http 3360https://cdn。-button triggers modal box:class=' btnbtn-primarybtn-LG ' :是一个放大的主样式，它将类指定为' button '。data-toggle='modal':应该是modal box的固定写法，只能是modal。至少我自己的实验表明，data-target='#myModal':从选择器指向id='myModal '的元素开始，也就是要显示和隐藏的modal box目标-/button class=' btnbtn-primarybtn-LG ' data-toggle=' modal ' data-target=' # myModal '-modal box-！-class=' modal fade ' : modal ——用于将div标识为modal box fade——当modal box切换时，内容会淡入淡出。id='myModal':是为上面提到的数据目标属性指定的元素。tabindex:属性指定元素的制表符控制顺序。Aria-Labelled by=' mymodallabel ' :指的是模式框的标题(去掉它影响不大)Aria-hidden:='true':设置模式框是不可见的。点击按钮显示-div class=' modal fade ' id=' my modal ' tabindex=' 1 '角色=' dialog ' aria-标记为=' mymodallabel ' aria-hidden=' true ' div class=' modal-dialog ' div class=' modal-content ' div class=' modal-header '！-data-miss=' modal' :加上这个，点击按钮时，modal框会关闭。下面的关闭按钮也添加了这个属性-按钮类型=' Button ' class=' close ' data-miss=' Modal ' aria-hidden=' true '/按钮H4 class=' Modal-title ' id=' mymodallabel ' Modal title/H4/div class=' Modal-body '输入类型=' text '占位符=' input./Div class=' modal-footer ' button type=' button ' class=' btnbtn-default ' data-misse=' modal ' close/button button type=' button ' class=' btnbtn-primary '提交更改/button /div /div！- /.模态-内容- /div！-/.- /.modal - /div /body/html操作效果图如下：

如果你还想深入学习，可以点击这里学习，然后附上3个精彩话题给大家：

引导学习教程

引导实用教程

引导插件教程

以上就是本文的全部内容，希望对大家的学习有所帮助。