bootstrap3官網明確指出

千萬不要在一個模態框上重疊另一個模態框。要想同時支援多個模態框，需要自己寫額外的程式碼來實現。

bootstrap3相關原始碼分析

開發過程中經常會遇到在一個模態框上彈出另一個模態框，

bootstrap.css中 模態框的z-index為1050

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
 

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

分析之後的解決方案

var modalLen = $(".modal-backdrop").length,
          zIndex = $(".modal-backdrop").eq(0).css("z-index");
      for(var i = 1; i < modalLen; i ++){
        $(".modal-backdrop").eq(i).css({
          "z-index": zIndex + i * 10 + 1
        });
        $(".modal.in").eq(i).css({
          "z-index": zIndex + (i + 1) * 10 + 1
        });
      }
 

把上面的程式碼放在 bootstrap.js這句程式碼的前面

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })