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

2020-12-17 14:12:39 +08:00
 sunhk25

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

DEMO: http://jsfiddle.net/4wLbvft6/4/

$(function(){
 $(".modal").modal("show").draggable({handle: ".modal-header"});
 $(".btn-primary").on("click", function(){
 	alert("btn click")
 })
})
1752 次点击
所在节点    CSS
7 条回复
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
这难道不是本来就是 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/
有什么写法能让他保留初始位置吗

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/736358

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX