如何在手機中隱藏自舉模式

這是代碼。試圖使用hidden-xs，但這不適用於模式，請在手機上獲取屏幕變暗的視圖。任何幫助將不勝感激。已嘗試使用hidden-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>

來源

2016-04-15 shriekz

的可能的複製[隱藏在移動Bootsrap模態]（http://stackoverflow.com/questions/29584172/hide-bootsrap-modal-in-mobile） –

使用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>

來源

2016-04-15 04:11:06

沒有爲我工作我仍然得到對話，即使手機.. – shriekz

http://codepen.io/Ramac handra/pen/MyVMEO –

如果屏幕寬度小於599px模式不可見檢查此鏈接這一個工作codepen.io/Ramachandra/pen/MyVMEO –

這可能已經過時，但您可能會發現它對您的情況很有用。檢查用戶是否通過手機瀏覽，如果是，請不要顯示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'); 
     } 
});

來源

2016-04-15 03:40:59

在模式上使用hidden-xs，並使用CSS媒體查詢來隱藏背景。

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

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

來源

2016-04-15 11:29:09 ZimSystem

我利用自舉的.hidden-md-up類，隱藏用於片劑，筆記本，臺式機一個元件等

Bootstrap v4 responsive utilities

來源

2016-11-23 06:16:06 austin

如何在手機中隱藏自舉模式

回答

相關問題