以下是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” 樣式，在模態框巢狀時使用，以防止模態框出現層級錯亂問題。