我正在尝试使 Bootstrap 模式可拖动到页面上的任何位置,并且当模式打开时,我希望用户能够继续使用该页面。
我能够使用 jquery-ui 使模态可拖动,但我坚持要在模态打开时使页面可用。尝试了几个关于 CSS 的建议,但没有一个能像我希望的那样工作。
这使得页面可用,但模式仅限于页面的一部分:Bootstrap Modal - make background clickable without closing out modal
与此相同:Enable background when open bootstrap modal popup
是否有可能通过 Bootstrap 模式实现这一点?
这是我的 JS:
$('#btn1').click(function() {
var modalDiv = $('#myModal');
modalDiv.modal({backdrop: false, show: true});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
JSFiddle 链接:https://jsfiddle.net/ntLpg6hw/1/
最佳答案
这真的很酷!
我认为您只需要一点 CSS。
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
您还应该添加一些 jQuery 来重置按钮点击时的模态位置。
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
查看 Fiddle
注意:Facebook 现在正在对外部新闻源视频做类似的事情。如果您在观看视频时滚动离开视频,它就会变成拖放视频。
基本上,他们的视频弹出父容器是position: relative
,而该容器的直接子容器是position: fixed
。这里使用相同的策略。
关于javascript - 使 Bootstrap 模式可拖动并保持背景可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45062397/