使bootstrap模式可拖动并保持背景可用

我正试图在页面的任何地方创建一个可拖动的模式可拖动，当模态打开时，我希望用户能够继续使用该页面。

我能够使用jquery-ui使模态可拖动，但是当模态打开时我仍然坚持使页面可用。 用CSS尝试了几个建议，但没有一个像我希望的那样工作。

这使得页面可用，但模态仅限于页面的一部分： Bootstrap Modal – 使背景可点击而不关闭模态

与此相同： 打开bootstrap模式弹出窗口时启用后台

是否有可能通过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/

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

---

看看小提琴

---

注意： Facebook现在正在做与外部新闻源video类似的事情。 如果您在观看video时滚动远离video，则会变为拖放video。

基本上，他们的video弹出父容器是position: relative ，并且该容器的直接子容器是position: fixed 。 这里使用相同的策略。