在手机中隐藏Bootstrap模式 [英] Hide Bootstrap modal in mobile

问题描述

如何在 mobile 中隐藏Bootstrap模式.我尝试使用修饰符类，例如 hidden-xs hidden-sm ，但失败了.该模式将转到底部页面，而使顶部页面无法访问.

How do I hide Bootstrap modal in mobile. I tried to use modifier classes such as hidden-xs hidden-sm but fail. The modal would go to the bottom page, leaving the top page inaccessible.

这是我的代码:

<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:

Since hidden-xs and hidden-sm fail, I tried to change my css:

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

或

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

但是，它们也失败了.

推荐答案

您的媒体查询已被jQuery覆盖.尝试使用jQuery.

Your media query is overwritten by jQuery. Try it with jQuery.

类似这样的东西:

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

这篇关于在手机中隐藏Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！