bootstrap-model(对话框)打开关闭事件监听

事件：                                              描述：               

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>