Javascript 使引导模式可拖动并保持背景可用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45062397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make bootstrap modal draggable and keep background usable
提问by arie
I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to be able to continue using the page.
我正在尝试使引导模式可拖动到页面上的任何位置，并且当模式打开时，我希望用户能够继续使用该页面。
I was able to make the modal draggable with jquery-ui but I'm stuck on making the page usable while the modal is open. Tried several suggestions with CSS but none work quite as I'd like them to.
我能够使用 jquery-ui 使模态可拖动，但我坚持在模态打开时使页面可用。用 CSS 尝试了几个建议，但没有一个像我希望的那样工作。
This makes the page usable but the modal is limited to only a part of the page: Bootstrap Modal - make background clickable without closing out modal
这使页面可用，但模态仅限于页面的一部分：Bootstrap Modal - 使背景可点击而不关闭模态
Same as this one: Enable background when open bootstrap modal popup
与此相同：打开引导模式弹出窗口时启用背景
Is it possible to achieve this with bootstrap modal at all?
是否有可能通过引导模式来实现这一点？
This is my JS:
这是我的JS：
$('#btn1').click(function() {
var modalDiv = $('#myModal');
modalDiv.modal({backdrop: false, show: true});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
JSFiddle link: https://jsfiddle.net/ntLpg6hw/1/
JSFiddle 链接：https://jsfiddle.net/ntLpg6hw/1/
回答by Dan Kreiger
This is really cool!
这真的很酷！
I think all you need is a little css.
我认为你需要的只是一点点 css。
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
You should also add some jQuery to reset your modal position on button click.
您还应该添加一些 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"
});
});
Check out the Fiddle
看看小提琴
Note:Facebook is now doing something similar with external newsfeed videos. If you scroll away from a video while watching it, it becomes a drag and drop video.
注意：Facebook 现在正在对外部新闻源视频做类似的事情。如果您在观看视频时从视频中移开，它将变成拖放视频。
Basically, their video popup parent container is position: relative, and the direct child of that container is position: fixed. The same strategy is used here.
基本上，他们的视频弹出父容器是position: relative，而该容器的直接子容器是position: fixed。这里使用相同的策略。
