事件：                                              描述：               

show.bs.modal                     在呼叫 show 方法後觸發。

shown.bs.modal                   當模態框對使用者可見時觸發（將等待 CSS 過渡效果完成）。

hide.bs.modal                      當呼叫 hide 例項方法時觸發。

hidden.bs.modal                  當模態框完全對使用者隱藏時觸發。

樣例：

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- 開啟對話方塊按鈕-->

<a href="#myModal" role="button" class=" pull-right" data-toggle="modal">檢視相關文獻</a>

<!-- Modal 對話方塊-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" >X</button>
       <h3>糖尿病</h3>
   </div>
   <div class="modal-body wn-a4-scroll" style="max-height: 400px;">
  <ul >
                            <li><a href="http://www.ncbi.nlm.nih.gov/pubmed/9668175?dopt=Abstract" target="_blank"></a></li>
              </ul>
</div>
<div class="modal-footer">
       <a href="#" class="btn btn-primary" data-dismiss="modal">關閉</a>
</div>
</div>
</div>  
</div>

<script>

//顯示modal對話方塊時防止視窗抖動

//監聽開啟對話方塊時讓父視窗左移17px
$(function () { $('#myModal').on('show.bs.modal', function () {
 body.style.paddingRight = "17px";})

});   

        //監聽關閉對話方塊時讓父視窗還原$(function () { $('#myModal').on('hidden.bs.modal', function () {
body.style.paddingRight = "0px";})
});
</script>