<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> </head> <style> </style> <body> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">button</button> <div class="modal fade" id="myModal"> <div> <div> <div> <button data-dismiss="modal">X</button> <div>title</div> </div> <div> aaaaaaaaaaa </div> <div> <button class="btn btn-primary" data-dismiss="modal">yes</button> <button class="btn btn-primary" data-dismiss="modal">no</button> </div> </div> </div> </div> </body> </html>
点击BUTTON 弹出界面。可以调出任何自己想改的信息。
modal-body：窗口主要内容区域。
modal-footer：窗口底部区域。（底部一般写确认和取消按钮）
在确认和取消按钮上绑定data-dismiss=“modal”来关闭模态框。
过渡效果：
在默认情况下，模态框、弹出框、选项卡是有过渡效果的。
模态框：弹出一个窗，这个窗是子窗体，子窗体覆盖了父窗体。
通过data属性来调用。
data-toggle=“modal”：用于打开modal窗口。
data-target=“#idName”：打开的目标。
模态窗口有两个基类：
modal：把div元素识别成模态框。
fade：当窗口切换，淡入淡出的效果。
模态窗口需要以下几个类来支撑：
modal-dialog：对话框。
modal-content：内容。
modal-header：模态框里的页头。
modal-title：模态框标题。
close：关闭按钮的样式。
data-dismiss="modal"：关闭模态框。
（虽然之前写了close的关闭图标，但是它是一个CSS样式，为关闭按钮设置样式。但是data-dismiss="modal"才是关闭按钮的行为。）
backdrop是用来定制模态窗口的外观和感观的选项，而不是方法。
