問題:

在同一頁面使用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>
只是將頁面加上層黑色遮罩,但瀏覽器卻無當機的狀況

 

arrow
arrow
    文章標籤
    Bootstrap modal
    全站熱搜

    K 發表在 痞客邦 留言(0) 人氣()