在移动设备中隐藏Bootstrap模态框

Question

我该如何在移动端隐藏Bootstrap模态框？我尝试使用修饰类例如 hidden-xs hidden-sm ，但都失败了。模态框会移到页面底部，导致页面顶部无法访问。

这是我的代码：

<div class="modal fade hidden-xs hidden-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:1em;">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-body">
       <img src="banner.jpg" height="388" width="558" alt="" class="img-rounded">
     </div>
    <div class="modal-footer" style="border:0">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>

由于hidden-xs 和 hidden-sm 失效，我尝试修改我的CSS：

@media only screen and (max-device-width: 480px){
  #myModal{display: none;}
}

或者

@media only screen and (max-device-width: 480px){
  .modal{display: none;}
}

但是，它们也有失败的情况。

- sianipard

Answer 1

您的媒体查询被 jQuery 覆盖了。请尝试使用 jQuery。

类似这样：

$('#myModal').on('shown.bs.modal', function () {
    var width = $(window).width();  
    if(width < 480){
        $(this).hide(); 
    }
});

- Danko

---

我先在桌面上尝试了一下，但模态框没有显示出来。 - sianipard

你移除了旧的 CSS 代码行吗？ - Danko

是的，我做了。这是来自Bootstrap手册的示例： $(function() { $("#myModal").modal(); }); - sianipard

你的代码现在可以工作了，我修改了我的样式中的.modal类，这样就避免了这段代码的运行。谢谢。 - sianipard

Answer 2

正如你所说，你的 CSS 无效，我建议使用 jQuery 方法，只需在模态 HTML 代码之前添加 <div class='check-width'>，然后使用以下脚本。

if($('.check-width').width() == 500){
   $('#myModal').modal('hide'); 

}
else{

}

- Wasim Ahmad

Answer 3

这个媒体查询对我很有帮助。

    @media(max-width:810px){
    #mymodal{
        display: none !important;
    }

    .modal-backdrop{
        display: none !important;;
    }
}

- Julian

Answer 4

尽管没有模态出现，但Danko上面的答案仍然在我的页面上留下了变暗的叠加层，但这是对我有效的方法：

    $('#myModal').on('shown.bs.modal', function () {
        var width = $(window).width();  
        if(width < 768){
            $('#myModal').modal('hide') 
        }
    });

- NJF