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在窗口调整大小时隐藏

回答

相关问题