Bootstrap Modal прокручивается на устройстве смартфона

У меня проблема с загрузочным модулем, в браузере смартфона. Он прокручивается вниз, и модальность не появляется.Bootstrap Modal прокручивается на устройстве смартфона

В браузере отладки (я пользуюсь браузером Chrome), когда я выбираю смартфон из списка, модальный отображается по-разному, но когда я пользуюсь устройством, он работает неправильно. Это прокрутка. Я прочитал статьи о stackoverflow относительно этой проблемы, но в моем случае это не работает.

Я сделал PrintScreen: в этом случае модальный показан corectly (на хром браузера)

Часть кода ниже:

<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; 
    }); 
});

и заголовок:

<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")

Я хочу вспомнить, что я использую последний Bootstrap версия v3.3.7

источник

2016-11-09 Marius Florian Ionescu

Пожалуйста, добавьте соответствующий код на свой вопрос. –

Источник: W3school

попробовать так:

<!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 прокручивается на устройстве смартфона

ответ

Смежные вопросы