スマートフォンブラウザのブートストラップモーダルに問題があります。スクロールダウンし、モーダルは表示されません。ブートストラップモーダルがスマートフォンデバイス上をスクロールしています
デバッグブラウザ(私はChromeブラウザを使用しています)では、リストのスマートフォンを選択すると、モーダルが重視されますが、デバイスを使用すると正しく動作しません。それはスクロールしています。 私はこの問題に関してはstackoverflowに関する記事を読んでいますが、私の場合は動作しません。
<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">×</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;
});
});
:
私はPrintScreenををした:コードの一部以下この場合、モーダルは、(クロムブラウザ上)corectly示され
およびヘッダー:
<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
あなたの質問に関連するコードを追加してください。 –