如何隐藏在移动引导模式

问题描述 投票:1回答:5

这是代码。试图用隐XS,但是,这并不模态工作,得到移动屏幕变暗视图。任何帮助,将在这里感谢。使用隐藏-XS,除去褪色都试过了,都没有奏效。

 <!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>
</head>
<body>
    TEST
    <div class="hidden-md hidden-xs">
        This is a test page..1
    </div>
<div id="myModal" class="modal fade active">
    <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>                                     
twitter-bootstrap
5个回答
0
投票

使用mediaquery我们可以根据屏幕宽度隐藏模式。这里我使用CSS媒体隐藏模式时,屏幕宽度高达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>       

0
投票

这可能是过时的,但你可能会发现它在你的情况下非常有用。检查如果用户是通过手机,如果是浏览,不显示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');
      }
 });

0
投票

使用hidden-xs的模式,和CSS媒体查询隐藏背景。

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

但是:四联zxsw POI


0
投票

我利用自举的http://bootply.com/tBIIZce0l1类,其中隐藏的平板电脑,笔记本电脑,台式机等元素

.hidden-md-up


0
投票

最简单的方法:

Bootstrap v4 responsive utilities
© www.soinside.com 2019 - 2024. All rights reserved.