[英]Modal opens in all browsers other than Safari
我有一個頁面,其中有一個浮動的可拖動模式,允許我在模式打開時訪問背景。 以下功能適用於Safari以外的所有瀏覽器。 有任何想法嗎? 以下小提琴在Safari中失敗。
的CSS
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 50%;
margin: 0;
padding: 10px;
}
的HTML
<button id="openModal">Show Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
腳本
$('#openModal').click(function() {
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
您需要從#myModal元素中刪除相對位置。
$('#openModal').click(function() { if (!($('.modal.in').length)) { $('.modal-dialog').css({ top: 0, left: 0 }); } $('#myModal').modal({ backdrop: false, show: true }); $('.modal-dialog').draggable({ handle: ".modal-header" }); });
.modal-dialog { position: fixed; width: 50%; margin: 0; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <button id="openModal">Show Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4> </div> <div class="modal-body"> Modal Body </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.