在移动设备中隐藏 Bootstrap 模态答案

【问题标题】：Hide Bootstrap modal in mobile在移动设备中隐藏 Bootstrap 模态
【发布时间】：2015-04-11 23:19:24
【问题描述】：

如何在 mobile 中隐藏 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;}
}

但是，他们也失败了。

【问题讨论】：

标签： twitter-bootstrap mobile bootstrap-modal

【解决方案1】：

您的媒体查询被 jQuery 覆盖。用 jQuery 试试吧。

类似这样的：

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

【讨论】：

我先在桌面试了，模态显示不出来。
您是否删除了旧的 css 行？
是的，我做到了。这是 Bootstrap 手册中的示例： $(function() { $("#myModal").modal(); });
您的代码正在运行，我在样式中修改了 .modal 类，它阻止了此代码的运行。谢谢。

【解决方案2】：

正如您所说，您的 css 无法正常工作，我建议使用 jquery 方法，只需在模态 html 代码 <div class='check-width'> 之前添加它，然后使用以下脚本。

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

}
else{

}

【讨论】：

【解决方案3】：

上面 Danko 的回答仍然在我的页面上留下了深色的叠加层（即使没有出现模式），但这对我有用：

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

【讨论】：

【解决方案4】：

这个媒体查询对我有用。

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

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

【讨论】：