Question

我有一个可拖动的模式窗口。我想完全禁用背景。我知道uibModal具有我可以设置true/false或static的background属性-但这对我来说还不够，我希望背景中的html内容仍然可以单击，例如Google Sheet帮助模式窗口-您可以将其打开，拖动并仍在后台运行。如何在模式打开的情况下完全禁用背景并使背景中的内容可单击？ uibModal是否可以实现此功能，还是应该只在纯javascript / iframe中创建模式窗口？

我可以使用此CSS使背景可点击：

.modal {
   pointer-events: none;}
.modal-backdrop {
   display: none;}

此问题是因为它无法再单击模式（仅可单击背景），因此它取消了可拖动功能。

Answer 1

我通过jQuery UI解决了我的问题

$(document).ready(function(){
    $("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})

你们可以看到我为希望拖动的div设置了我的ID，并且还为页面的主体设置了一个容器，这样人们就无法将div从视图（body）中移出并转向关闭滚动。之后，我设置了一个句柄-在此处设置div的可拖动部分（如果您希望整个div可拖动，则只需删除handle选项）-我将#header设置为我的句柄（顶部菜单栏）-人们可以在可拖动div内单击而不会意外移动它的方式。如果您希望它适合您，那么您只需要jQuery和jQueryUI。

这就像一种魅力，我非常高兴！

uibModal完全禁用背景并允许背景单击

1 个答案: