解決Bootstrap模態對話框嵌套的一個bug

Bootstrap不用多說了。Bootstrap自帶有模態對話框插件，使用起來很方便，只需按照如下格式定義html，然後用js觸發，或者用指定data屬性的普通html元素來觸發，後者的示例如下：

[html] 
<div id="myModal" class="modal hide fade" data-backdrop="static"> 
  <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
    <h3>對話框標題</h3> 
  </div> 
  <div class="modal-body"> 
    <p>One fine body…</p> 
  </div> 
  <div class="modal-footer"> 
    <a href="#" class="btn">關閉</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
  </div> 
</div> 

<div id="myModal" class="modal hide fade" data-backdrop="static">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>對話框標題</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">關閉</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>其中定義了data-dismiss="modal"屬性的按鈕用於關閉該模態對話框，筆者姑且稱其為“關閉”按鈕。一般情況下，這樣的默認設置沒有任何問題。筆者在項目中遇到的問題是：筆者設計的"modal-body"裡面的內容是一個模板，動態調用不同的子頁面內容；當子頁面中包含另一個子模態對話框的定義時，問題就出現了。子模態對話框彈出之後，點擊其“關閉”按鈕，會順帶著把父模態對話框給關閉掉。要解決這樣的問題，或者說是Bootstrap的一個bug，就需要查看源碼了。

查看Bootstrap 2.3.1版（未壓縮）的源碼，在872行可以找到如下函數，它定義了模態對話框類的構造函數：

[javascript] 
var Modal = function (element, options) { 
  this.options = options 
  this.$element = $(element) 
    .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) 
  this.options.remote && this.$element.find('.modal-body').load(this.options.remote) 
} 

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
  }Modal對象的構造在模態對話框顯示之前進行。我們不用關心具體的實現細節，只需看到代碼第3-4行將模態對話框的“隱藏”方法（hide）委托給帶有data-dismiss="modal"屬性的元素的click事件，通俗點說就是：找到父模態對話框中所有帶data-dismiss="modal"屬性的“關閉”元素，對其指定一個click事件處理函數，在這個函數中關閉該模態對話框。當子頁面中包含“關閉”元素時，它也會被賦予父對話框的關閉操作，因此點擊子頁面（子模態對話框）的“關閉”元素就順帶把父模態對話框給關閉了！找到了問題的原因，我們只需根據需要，修改相應的選擇器即可。根據筆者遇到的情況，只需在選擇器後面添加一個:first過濾器，意為選擇父模態對話框中的第一個“關閉”元素即可：

[javascript]
var Modal = function (element, options) { 
  this.options = options 
  this.$element = $(element) 
    .delegate('[data-dismiss="modal"]:first', 'click.dismiss.modal', $.proxy(this.hide, this)) 
  this.options.remote && this.$element.find('.modal-body').load(this.options.remote) 
} 

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]:first', 'click.dismiss.modal', $.proxy(this.hide, this))
    this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
  }至此，問題解決。