定义

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

实例

<div class="container">
        <div class="row">
            <div class="col-md-6 text-center">
                <h3>Nancy</h3><br>
                    <a data-toggle="modal" data-target="#modalOne">
                        <img src="https://static1.bcjiaoyu.com/9176a142fd2656ecb68324951ed05ce3_o.png-500x500" class="img-circle team">
                    </a>
                    <!--模态框-->
                <div class="modal fade" id="modalOne">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="modal-title">我是超人</span>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body">
                                模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">
                                    关闭
                                </button>
                            </div>
                        </div>   <!-- modal-content -->
                    </div>       <!-- modal-dialog -->
                </div>           <!-- modal -->
            </div>               <!-- col-md-6 -->
        </div>                   <!-- row -->
 </div>                       <!-- container -->

step1.由<a>、<button>、<p>等等标签承载一个开启模态框的媒介，并属上两个属性：

• data-toggle="model" 用于开启模态框功能；
• data-target="id" 用于指定模态框；

step2.用<div class="modal fade" id=" ">来承载模态框内容

• class="modal" 用来把<div>的内容识别为模态框;
• class="fade" 当模态框被切换时,它会引起内容淡入淡出。

step3.添加<div class="modal-dialog"> 用以设定模态框的样式，若不设置该div，则弹出的模态框的宽度将充满视窗上部。
step4.添加<div class="modal-content">泳衣设定模态框的样式，该类可以与step3合并。

step4设置模态框的内容<div class="modal-header">、<div class="modal-body">、<div class="modal-footer">
step5. data-dismiss="modal" 用以关闭模态框。

class="close" data-dismiss="modal" 组合使用用于添加关闭模态框的按钮，class="close" 主要用于关闭按钮的样式。