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

jgwigjjp  于 2022-11-21  发布在  Angular
关注(0)|答案(2)|浏览(172)

我有一个可拖动的模态窗口。我想完全禁用背景。我知道uibModal有一个背景属性,我可以设置true/falsestatic-但这对我来说还不够,我希望来自背景的html内容仍然是可点击的,例如Google Sheet Help模态窗口-您可以打开它,拖动它仍然可以在后台工作。我怎样才能完全禁用背景,并使后台的内容在模态打开时可以点击?这是用uibModal实现的吗?还是我应该用普通的javascript/iframe创建一个模态窗口?
我可以用这个CSS使背景可点击:

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

这样做的问题是,它杀死了可拖动功能,因为您不能再单击模态(只有背景是可单击的)。

pexxcrt2

pexxcrt21#

我解决了jQuery UI的问题

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

正如大家所看到的,我为希望可拖动的div设置了ID,还为页面主体设置了一个容器,这样人们就无法将div移出视图(body)并关闭滚动。之后我设置了一个句柄-这是设置div的可拖动部分的地方(如果你想让整个div都是可拖动的,只需删除handle选项)-我将#header设置为我的handle(顶部菜单栏)--这样人们就可以在可拖动的div中点击,而不会意外地移动它。如果你想让它为你工作,你只需要jQuery和jQueryUI。
这工作就像一个魅力,我很高兴!

aiazj4mn

aiazj4mn2#

除了CSS中提到的问题,添加**pointer-events:all;**到modal的内容容器。适用于我的uibModal。

相关问题