Question

这是代码。尝试使用hidden-xs，但这对模态不起作用，在移动设备上获得屏幕变暗的视图。任何帮助将在这里受到赞赏。尝试过使用hidden-xs，并删除淡入淡出，两者都不起作用。

<bean id="handshakeHandler" class="x.x.x.HandshakeHandler"/>

<websocket:message-broker application-destination-prefix="/app">
  <websocket:stomp-endpoint path="/ws">
      <websocket:handshake-handler ref="handshakeHandler"/>
      <websocket:sockjs/>
  </websocket:stomp-endpoint>
  <websocket:simple-broker prefix="/topic, /queue"/>
</websocket:message-broker>

Answer 1

这可能已经过时，但您可能会发现它在您的情况下很有用。检查用户是否正在浏览移动设备，如果是，请不要显示modal。

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

 $(document).ready(function(){
      if(!isMobile.any() ) { //check if it is not mobile
          $("#myModal").modal('show');
      }
 });

Answer 2

使用mediaquery，我们可以根据屏幕宽度隐藏模态。这里我使用CSS Media隐藏模式当屏幕宽度达到598px（手机，平板电脑）。如果屏幕宽度超过598像素（台式机，笔记本电脑），则会显示模式。

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Example of Auto Loading Bootstrap Modal on Page Load</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">/script><script type="text/javascript"> $(document).ready(function(){
    $("#myModal").modal('show');
});</script><style>@media only screen and (min-width: 480px) {
.screen {
    display:none;}}@media only screen and (min-width: 599px) {
.screen {
    display:block;}}</style></head><body>
TEST
<div class="hidden-md hidden-xs screen">
    This is a test page..1
</div><div id="myModal" class="modal fade active screen">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Subscribe our Newsletter</h4>
        </div>
        <div class="modal-body">
            <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Name">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" placeholder="Email Address">
                </div>
                <button type="submit" class="btn btn-primary">Subscribe</button>
            </form>
        </div>
    </div>
</div></div></body></html>

Answer 3

在模态上使用hidden-xs，使用CSS媒体查询隐藏背景。

@media (max-width:768px) {
  .modal-backdrop{
    display:none;
  }
}

演示：http://bootply.com/tBIIZce0l1

Answer 4

我利用了bootstrap的isset类，它隐藏了平板电脑，笔记本电脑，台式机等元素。

Bootstrap v4 responsive utilities

Answer 5

最简单的方法：

$(window).on("load resize",function(){
  if ($(window).width() >= 768) {  
    $('YOURSELECTOR').addClass('myModal');
  }
  if ($(window).width() < 768) {
    $('.YOURSELECTOR').removeClass('myModal');
  }
});

如何隐藏移动中的bootstrap模式

5 个答案: