这是代码。试图用隐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>
使用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>
这可能是过时的,但你可能会发现它在你的情况下非常有用。检查如果用户是通过手机,如果是浏览,不显示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');
}
});
使用hidden-xs
的模式,和CSS媒体查询隐藏背景。
@media (max-width:768px) {
.modal-backdrop{
display:none;
}
}
但是:四联zxsw POI
我利用自举的http://bootply.com/tBIIZce0l1类,其中隐藏的平板电脑,笔记本电脑,台式机等元素
.hidden-md-up