Javascript 使引导模式可拖动并保持后台可用

我正在尝试使引导模式可拖动到页面上的任何位置，当模式打开时，我希望用户能够继续使用该页面

我能够使用jquery ui使模式成为可拖动的，但我一直坚持在模式打开时使页面可用。尝试了几个CSS建议，但没有一个像我希望的那样有效

这使页面可用，但模式仅限于页面的一部分：

与此相同：

是否有可能通过引导模式实现这一点

这是我的JS：

$('#btn1').click(function() {
    var modalDiv = $('#myModal');
    modalDiv.modal({backdrop: false, show: true});

    $('.modal-dialog').draggable({
      handle: ".modal-header"
    });
});

jsiddle链接：

这真是太酷了

我想你需要的只是一点css

#myModal{
位置：相对位置；
}
.模态对话框{
位置：固定；
宽度：100%；
保证金：0；
填充：10px；
}

您还应该添加一些jQuery，以便在单击按钮时重置模式位置

$（'#btn1'）。单击（函数（）{
//如果不可见，则重置模式
如果（！（$（'.modal.in'.length））{
$（'.modal dialog'）.css({
排名：0，
左：0
});
}
$（“#myModal”）.modal({
背景：错，
秀：真的
});
$（'.modal dialog'）。可拖动({
句柄：“.modal头”
});
});

---

查看

---

注意：Facebook现在也在做一些类似的事情，比如外部新闻源视频。如果您在观看视频时从视频中滚动，它将成为拖放视频

---

基本上，它们的视频弹出父容器是

position:relative

，该容器的直接子容器是

position:fixed

。此处使用相同的策略。

，您可能需要调整一些策略bits@Morpheus这使得模式只能在页面的一小部分进行拖动，是否可以不将拖动限制在特定位置，而是让用户将其拖动到他想要的任何位置？太好了我很高兴它像预期的那样发挥了作用。非常感谢你！有没有办法不用jqery来解决这个问题？我尝试了这个解决方案，它成功了，谢谢。但是，一个问题是，当您移动模态使其部分位于视口之外时，滚动条不会出现。可能是因为position:fixed元素，但是有没有什么想法可以解决这个问题，这样滚动条就会出现？拖动是可行的，但问题是它会滞后。我的模态容器非常大，包含许多输入字段和其他数据。拖动时会滞后。我想让它以和鼠标一样的速度移动。