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