需定义属性
- data-target： 指向要触发的模态框是哪一个
- data-toggle：控制模态框的显示，值为modal
- data-dismiss：关闭模态框，值为modal
模态框的结构
<div class="modal" role="dialog" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>头部标题</h1>
</div>
<div class="modal-body">
<p>内容</p>
</div>
<div class="modal-footer">
<!--尾部，通常放置按钮-->
<button class="btn btn-primary">确认</button>
<button class="btn btn-default">取消</button>
</div>
</div>
</div>
</div>
实例
<div class="container">
<button data-toggle="modal" data-target="#layer" class="btn btn-primary">触发元素</button>
<!--模态框-->
<div class="modal" role="dialog" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h1>这是一个模态框</h1>
</div>
<div class="modal-body">
<p>我是内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确认</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
