Bootstrap_Javascript_弹窗

一. 结构分析

　　Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

　　☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

　　☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

　　☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

<div class="modal" id="mymodal"> <div class="modal-dialog">  <div class="modal-content">   <div class="modal-header">    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>    <h4 class="modal-title">模态弹出窗标题</h4>   </div>   <div class="modal-body">    <p>模态弹出窗主体内容</p>   </div>   <div class="modal-footer">    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>    <button type="button" class="btn btn-primary">保存</button>   </div>  </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->

原标题：Bootstrap_Javascript_弹窗

关键词：JavaScript