以下是Bootstrap 模态框
//模态框的触发事件
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p>
//模态框的实现
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">唤醒活动</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
//Bootstrap的引入
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
//模态框关闭事件 模态框id
$('#example').on('hide.bs.modal', function () {
alert('嘿,我听说您喜欢模态框...');
})
//模态框开启事件
$('#example').on('show.bs.modal', function () {
alert('嘿,我听说您喜欢模态框...');
})
扩展: style=“z-index:111111” 样式,在模态框嵌套时使用,以防止模态框出现层级错乱问题。