Bootstrap Modal正在向下滾動智能手機設備

我在智能手機瀏覽器上的引導模式有問題。它向下滾動，模態不會出現。Bootstrap Modal正在向下滾動智能手機設備

在調試瀏覽器（我使用Chrome瀏覽器）時，當我選擇列表的智能手機時，模式顯示正確，但是當我使用該設備時，它無法正常工作。它正在滾動。我已閱讀關於此問題的計算器上的文章，但在我的情況下，它不起作用。

我已經作出了PRINTSCREEN：在這種情況下，模態corectly示出（在鉻瀏覽器）

下面A的代碼部分：

<div id='myModal' class='modal fade' role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content" style="padding-left:20px"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h2>@Facultate.Message.headStudentCurs</h2> 
     </div> 
     <div id='myModalContent'></div> 

    </div> 
</div>

$(function() { 
    $.ajaxSetup({ cache: false }); 
    $("a[data-modal]").on("click", function (e) { 
     $('#myModalContent').load(this.href, function() { 
      $('#myModal').modal({ 
       keyboard: true 
      }, 'show'); 
     }); 
     return false; 
    }); 
});

and Header：

<link href="~/Content/MyStyle.css" rel="stylesheet" /> 
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> 
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.11.0.min.js"></script> 
<script language="JavaScript" type="text/javascript" src="~/Scripts/i18n/grid.locale-en.js"></script> 
<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery.jqGrid.src.js"></script> 
<script src="~/Scripts/bootbox.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> 
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 






<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title></title> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr")

我要記住的是，我用最後的引導版本v3.3.7

來源

2016-11-09 Marius Florian Ionescu

請相關代碼添加到您的問題。 –

來源：

嘗試這樣的：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

來源

2016-11-09 19:29:48 000

我已經解決了這個問題。這是問題：

.modal { 
    padding-bottom: 600px; 
    padding-left:40px !important; 
    max-width:400px !important; 
    position:fixed; 

} 
.bootbox{ 
    max-width:400px !important; 
} 

body.viewport-lg { 

position: relative; 
} 
body { 
overflow-x: hidden; 
overflow-y: scroll !important; 
} 
body.modal-open { 

overflow: hidden; 
position: fixed; 
}

我從CSS文件中刪除此代碼，我已經改變了自舉版本。

來源

2016-11-09 14:13:35

Bootstrap Modal正在向下滾動智能手機設備

回答

相關問題