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

bootstrap的modal能不能达到背后阴影同时又是static的效果?

  •  
  •   clino ·
    zhangchunlin · 2014-01-15 09:49:35 +08:00 · 14122 次点击
    这是一个创建于 3942 天前的主题,其中的信息可能已经有所发展或是发生改变。
    //前端菜菜鸟一只
    我想要的是 http://uliweb.cpython.org/login 这样的效果

    想看 bootstrap 能不能做到,bootstrap的效果大致有两种,一种是 static 的,即 http://getbootstrap.com/2.3.2/javascript.html#modals 下 "Static example"这种效果,这种点击modal外面modal不会消失,但是这种是背后没有阴影的

    另外一种是 http://getbootstrap.com/2.3.2/javascript.html#modals 下面 "Live demo" 下点击 "Launch demo modal" 这种效果,背后有阴影,但是点击modal的外面modal就会消失

    不知道有没有办法可以做到?
    第 1 条附言  ·  2014-01-22 22:46:01 +08:00
    最后试过了直接加上一个
    $('#myModal').modal({
    backdrop: 'static'
    })
    就好了.
    13 条回复    1970-01-01 08:00:00 +08:00
    explon
        1
    explon  
       2014-01-15 09:59:58 +08:00
    可以做到的,早期版本的 WeCenter 快速发起就是这样子的
    cutehalo
        2
    cutehalo  
       2014-01-15 10:12:40 +08:00
    给那个live demo按钮加上data-backdrop="static"
    或者jQuery里绑定的时候加上
    $('#myModal').modal({
    backdrop: 'static'
    })
    mactaew
        3
    mactaew  
       2014-01-15 10:27:28 +08:00   ❤️ 2
    推荐一个重新封装过的js类库/插件,调用更简单。
    已包含样式,不依赖jQ,BS。

    https://github.com/nakupanda/bootstrap3-dialog

    说明文档写得非常清楚。可以试一试。
    clino
        4
    clino  
    OP
       2014-01-15 11:02:31 +08:00
    @explon 你说的这个WeCenter就是用的bootstrap? 如果能做到的话,那问题就是怎么做到了

    @cutehalo 这个我试过了,就是我说的第一种效果"这种点击modal外面modal不会消失,但是这种是背后没有阴影的"

    @mactaew 谢谢,参考一下.不过这是用到的bootstrap 3,我现在用的是 2
    arbipher
        5
    arbipher  
       2014-01-15 11:08:59 +08:00
    @mactaew 这个赞,谢谢推荐。
    mactaew
        6
    mactaew  
       2014-01-15 11:26:10 +08:00
    @clino 哦,这样啊~那真是的。哈哈。另外勘误一下,这个是需要依赖jQuery的,不好意思了各位!
    cutehalo
        7
    cutehalo  
       2014-01-15 13:45:11 +08:00
    @clino 这种带后面的遮罩啊...文档里说了backdrop: Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
    clino
        8
    clino  
    OP
       2014-01-15 14:36:52 +08:00
    @cutehalo 我提问题的时候就说了,这种我试过,效果就是 '"Static example"这种效果,这种点击modal外面modal不会消失,但是这种是背后没有阴影的' ,木有遮罩啊
    cutehalo
        9
    cutehalo  
       2014-01-15 14:48:35 +08:00
    atan
        10
    atan  
       2014-01-15 14:55:47 +08:00
    specify static for a backdrop which doesn't close the modal on click.文档很清楚阿
    clino
        11
    clino  
    OP
       2014-01-15 15:29:55 +08:00
    @cutehalo 你的这个版本确实是可以的,我之前试的是用javascript调用的方式,我再试试看
    cutehalo
        12
    cutehalo  
       2014-01-15 17:17:54 +08:00   ❤️ 1
    clino
        13
    clino  
    OP
       2014-01-22 22:45:26 +08:00
    @cutehalo 最后试过了直接加上一个
    $('#myModal').modal({
    backdrop: 'static'
    })
    就好了.
    不过有点奇怪,这种我记得之前试过不行的,不知道之前哪里搞错了.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1536 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:58 · PVG 07:58 · LAX 16:58 · JFK 19:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.