第二模式僅限於第一模區域

使用引導3.3.5，並試圖打開第二個模式，並發現了一個奇怪的現象：第二模式僅限於第一模區域

的背景下不圍繞第二模態表現，而不是將其從第一個模態覆蓋背景
第二個模態是限於第一個模態的面積。

尋找一種方式來顯示它周圍，沒有被第一模限制區域的背景下，第二模式。

代碼：

<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <span class="modal-title">Title #1</span> 
      </div> 
      <div class="modal-body"> 
       <div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <h4 class="modal-title">Title #2</h4> 
          </div> 
          <div class="modal-body"> 
           <p>Second Modal</p> 
           <p>Second Modal</p> 
           <p>Second Modal</p> 
           <p>Second Modal</p> 
           <p>Second Modal</p> 
           <p>Second Modal</p> 
          </div> 
          <div class="modal-footer"> 
           <button class="btn btn-default" data-number="2">Close</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      <a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a> 
      </div> 
      <div class="modal-footer"> 
       <a data-loading-text="Wait" class="btn btn-default">Cancel</a> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-11-02 Khrys

在Bootstrap的文檔中說道：「不支持多個開放模式，一定不要打開一個模式，而另一個仍然可見。顯示多個模態時間需要自定義代碼。「（http://getbootstrap.com/javascript/#modals）。 –

至於說@Tim劉易斯引導不支持堆疊模式，並同時顯示多個模式的需要自定義代碼

首先，第1內部取出第二個模式HTML莫代爾並放在外面，所以HTML會是;

<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <span class="modal-title">Title #1</span> 
      </div> 
      <div class="modal-body"> 
       <a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a> 
      </div> 
      <div class="modal-footer"> 
       <a data-loading-text="Wait" class="btn btn-default">Cancel</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
        <h4 class="modal-title">Title #2</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Second Modal</p> 
       <p>Second Modal</p> 
       <p>Second Modal</p> 
       <p>Second Modal</p> 
       <p>Second Modal</p> 
       <p>Second Modal</p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-default" data-number="2">Close</button> 
      </div> 
     </div> 
    </div> 
</div>

將解決這個問題秒模態限於第一模態的面積。

我們解決問題背景下，不圍繞第二模態表現，而不是將其從第一模覆蓋的背景下在JS

$(document).ready(function() { $('#SecondModal').on('show.bs.modal', function() { $('#FirstModal').css('z-index', 1039); }); $('#SecondModal').on('hidden.bs.modal', function() { $('#FirstModal').css('z-index', 1041); }); });

Fiddle

添加以下代碼

來源

2015-11-02 19:43:04 Shehary

謝謝謝哈！ – Khrys

-1

您有separeted實現這個目標二模態工作。

第一點我可以用這個 https://jsfiddle.net/2zqe93u1/

$('#FirstModal').modal('show'); 
$('#SecondModal').on('shown.bs.modal', function (e) { 
$('.modal-backdrop').first().appendTo($(this).parent()) 
}) 

$('#SecondModal').on('hidden.bs.modal', function (e) { 
$('.modal-backdrop').first().remove() 
}) 
$("button[data-number=2]").click(function(){ 
$('#SecondModal').modal('hide'); 
});

做，但我不明白的第二個，如果第二模式可以被拖出第一，爲什麼背景必須是首先？但隨着模態的事件發生，我相信你可以做到這一點。看看的jsfiddle抓思想

來源

2015-11-02 19:34:13

第二模式僅限於第一模區域

回答

相關問題