Bootstrap 模态框的遮罩层挡住后面的元素，无法触发操作

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1437 天前的主题，其中的信息可能已经有所发展或是发生改变。

弹出框类相统一成 bootstrap 的 modal，然后像 jqueryui 的弹出框那样，可移动然后再点击操作其他按钮。利用 JqueryUI 的 draggable 可以实现拖拽，但是 modal 的遮罩层挡住后面的元素无法操作。请教有方法吗？

$(function(){
 $(".modal").modal("show").draggable({handle: ".modal-header"});
 $(".btn-primary").on("click", function(){
 	alert("btn click")
 })
})

7 条回复 • 2020-12-17 19:15:31 +08:00

hahastudio

2020-12-17 14:27:06 +08:00

$(".modal").modal({"show":true,"backdrop":false})
关了 backdrop 不就好了

hahastudio

2020-12-17 14:28:36 +08:00

啊，ui-draggable 会挡住。。。

GuuJiang

2020-12-17 14:38:42 +08:00 via iPhone

这难道不是本来就是 modal 的定义吗？想要不挡住就用非 modal 的啊

sunhk25

2020-12-17 15:00:07 +08:00

@GuuJiang
是有点逆道而行的感觉，否则还需要把 JqueryUI 的 dialog 界面统一

sunhk25

2020-12-17 15:01:17 +08:00

@hahastudio
backdrop 已关闭，能看见后面的元素但是操作不了

hahastudio

2020-12-17 18:26:36 +08:00

.modal {
bottom: initial;
overflow-y: hidden;
}
.modal-dialog {
margin: 0;
}
这样？

sunhk25

2020-12-17 19:15:31 +08:00

@hahastudio
试了一下除了初始位置外基本满足要求了。
http://jsfiddle.net/rmx5v182/
有什么写法能让他保留初始位置吗