jQuery 模态框的开启关闭事件

以下是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” 样式，在模态框嵌套时使用，以防止模态框出现层级错乱问题。