Bootstrap Modal在窗口調整大小時隱藏

我正在使用引導程序下拉菜單和模態彈出窗口的網頁上工作。Bootstrap Modal在窗口調整大小時隱藏

我把模式彈出內下拉div。彈出窗口打開並完美工作。

我得到的問題是每當我調整窗口大小時，窗口達到其最小寬度時模態彈出窗口會隱藏。

我希望彈出窗口留在頁面上。

下面是代碼：

<div class="btn-group dropdown"> 
     <button type="button" 
       id="btnCalculate" 
       data-toggle="dropdown" 
       class="dropdown-toggle"> 
      Calculate 
     </button> 
     <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu"> 
      <div class="col-md-12"> 
       <row> 
        <label class="control-label">Test</label> 
        <button name="getBalance" 
          type="submit" 
          data-toggle="modal" 
          data-target="#myModal" 
          class="btn btn-default" 
          > 
         Balance 
        </button> 
       </row> 
      </div> 
      <!-- Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
       <div class="modal-dialog"> 
        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Modal Header</h4> 
         </div> 
         <div class="modal-body"> 
          <p>Some text in the modal.</p> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

感謝

來源

2017-06-02 vinay singh

檢查媒體查詢與模態類相關聯。媒體查詢可能會隱藏它。 –

你能分享一些代碼我怎樣才能達到這與媒體查詢 –

直接連接的模式，以<div class="container">標籤，而不是下拉菜單。

就像如下：

<div class="container"> 
    <div class="btn-group dropdown"> 
     <button type="button" 
       id="btnCalculate" 
       data-toggle="dropdown" 
       class="dropdown-toggle"> Calculate </button> 
     <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu"> 
      <div class="col-md-12"> 
       <row> 
        <label class="control-label">Test</label> 
        <button name="getBalance" 
          type="submit" 
          data-toggle="modal" 
          data-target="#myModal" 
          class="btn btn-default"> 
         Balance 
        </button> 
       </row> 
      </div> 
     </div> 
    </div> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 

    </div>

這不是prefarble放置低級別的位置，這樣的下拉菜單內模態。請參閱 how modals work

Modals使用位置：固定，有時對其渲染有點特別。儘可能將模態HTML置於頂層位置以避免其他元素的潛在干擾。在另一個固定元素中嵌套.modal時，您可能會遇到問題。

但是，如果你堅持要保持下拉菜單中的模式，你需要防止被關閉時的模式被稱爲下拉菜單中，並確保它被放置在.modal-backdrop

頂部JS代碼：

$('.dropdown').on('hide.bs.dropdown', function() { 
    return false; 
});

，並添加z-index:auto到dropdown-menu風格

來源

2017-06-02 15:02:46

是的，這將是一個很好的解決方案。但我的要求是迫使我把模態放在div中。所以，你想分享的任何其他解決方案。謝謝 –

我編輯了我的答案以滿足您的要求。 –

我在評論中犯了一個錯誤。我需要將模態放置在div＃下拉菜單中。 –

Bootstrap Modal在窗口調整大小時隱藏

回答

相關問題