在移动设备中隐藏 Bootstrap 模态

Posted 2023-03-31

【中文标题】在移动设备中隐藏 Bootstrap 模态

【英文标题】：Hide Bootstrap modal in mobile

【发布时间】：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"    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)
  #myModaldisplay: none;

或

@media only screen and (max-device-width: 480px)
  .modaldisplay: none;

但是，他们也失败了。

【参考方案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;;