V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
sunhk25
V2EX  ›  CSS

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

  •  
  •   sunhk25 · 2020-12-17 14:12:39 +08:00 · 1607 次点击
    这是一个创建于 1197 天前的主题,其中的信息可能已经有所发展或是发生改变。

    弹出框类相统一成 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")
     })
    })
    
    7 条回复    2020-12-17 19:15:31 +08:00
    hahastudio
        1
    hahastudio  
       2020-12-17 14:27:06 +08:00
    $(".modal").modal({"show":true,"backdrop":false})
    关了 backdrop 不就好了
    hahastudio
        2
    hahastudio  
       2020-12-17 14:28:36 +08:00
    啊,ui-draggable 会挡住。。。
    GuuJiang
        3
    GuuJiang  
       2020-12-17 14:38:42 +08:00 via iPhone
    这难道不是本来就是 modal 的定义吗?想要不挡住就用非 modal 的啊
    sunhk25
        4
    sunhk25  
    OP
       2020-12-17 15:00:07 +08:00
    @GuuJiang
    是有点逆道而行的感觉,否则还需要把 JqueryUI 的 dialog 界面统一
    sunhk25
        5
    sunhk25  
    OP
       2020-12-17 15:01:17 +08:00
    @hahastudio
    backdrop 已关闭,能看见后面的元素但是操作不了
    hahastudio
        6
    hahastudio  
       2020-12-17 18:26:36 +08:00
    .modal {
    bottom: initial;
    overflow-y: hidden;
    }
    .modal-dialog {
    margin: 0;
    }
    这样?
    sunhk25
        7
    sunhk25  
    OP
       2020-12-17 19:15:31 +08:00
    @hahastudio
    试了一下除了初始位置外 基本满足要求了。
    http://jsfiddle.net/rmx5v182/
    有什么写法能让他保留初始位置吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1075 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:45 · PVG 06:45 · LAX 15:45 · JFK 18:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.