K'隨手記

問題：

在同一頁面使用jquery 1.9.1 + Bootstrap 2.3.2，

並使用多個Bootstrap modal，由於疏忽，

使用了Bootsstrap 3.0.0 rc1的語法，在呼叫modal （$('#myModal').modal('show');）相關功能時，

於Ie 9(9.0.8112.16421) 、chrome(28.01500.95 m)、Firefox(23.0)瀏覽器產生當機的狀況。

2.3.2 modal 範例

資料來源： http://getbootstrap.com/2.3.2/javascript.html#modals

1. <!-- Modal -->
2. <divid="myModal"class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
3. <divclass="modal-header">
4. <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
5. <h3id="myModalLabel">Modal header</h3>
6. </div>
7. <divclass="modal-body">
8. <p>One fine body…</p>
9. </div>
10. <divclass="modal-footer">
11. <buttonclass="btn"data-dismiss="modal"aria-hidden="true">Close</button>
12. <buttonclass="btn btn-primary">Save changes</button>
13. </div>
14. </div>

我卻寫為

3.0.0 rc1 範例

資料來源：http://getbootstrap.com/javascript/#modals

<!-- Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

2.3.2與3.0.0 rc1 modal的參數差別主要是

2.3.2最外層需加上hide

而3.0.0 rc1 多了

<div class="modal-dialog">
<div class="modal-content">

解決辦法：

##在jquery 1.9.1 + Bootstrap 2.3.2 中，

使用3.0.0 rc1語法，同一頁面中，若只使用1~2個modal，執行時網頁能正常運作，不會有當機的狀況，但是使用2個以上modal時，

執行呼叫modal（$('#myModal').modal('show');）時，就會造成瀏覽器當機，只要補上hide，如下所示，就能解決當機問題。

<div class="modal hide fade" id="myModal">

##在jquery 1.9.1 + Bootstrap 3.0.0 rc1 中，

使用3.0.0 rc1語法，同一頁面中，有多個modal定義，並在定義中加上hide參數，

執行呼叫modal（$('#myModal').modal('show');）時，定義在modal-boday的內容卻不會正常顯示，

<div class="modal-body">
  <p>One fine body&hellip;</p>
</div>
只是將頁面加上層黑色遮罩，但瀏覽器卻無當機的狀況