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

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

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

//前端菜菜鸟一只
我想要的是 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'
})
就好了.

Bootstrap

Static

做到

13 条回复 • 1970-01-01 08:00:00 +08:00

explon

2014-01-15 09:59:58 +08:00

可以做到的，早期版本的 WeCenter 快速发起就是这样子的

cutehalo

2014-01-15 10:12:40 +08:00

给那个live demo按钮加上data-backdrop="static"
或者jQuery里绑定的时候加上
$('#myModal').modal({
backdrop: 'static'
})

mactaew

2014-01-15 10:27:28 +08:00

推荐一个重新封装过的js类库/插件，调用更简单。
已包含样式，不依赖jQ，BS。

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

说明文档写得非常清楚。可以试一试。

clino

2014-01-15 11:02:31 +08:00

@explon 你说的这个WeCenter就是用的bootstrap? 如果能做到的话,那问题就是怎么做到了

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

@mactaew 谢谢,参考一下.不过这是用到的bootstrap 3,我现在用的是 2

arbipher

2014-01-15 11:08:59 +08:00

@mactaew 这个赞，谢谢推荐。

mactaew

2014-01-15 11:26:10 +08:00

@clino 哦，这样啊~那真是的。哈哈。另外勘误一下，这个是需要依赖jQuery的，不好意思了各位！

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

2014-01-15 14:36:52 +08:00

@cutehalo 我提问题的时候就说了,这种我试过,效果就是 '"Static example"这种效果,这种点击modal外面modal不会消失,但是这种是背后没有阴影的' ,木有遮罩啊

cutehalo

2014-01-15 14:48:35 +08:00

@clino http://jsfiddle.net/yPzHp/ 这样不对？

atan

2014-01-15 14:55:47 +08:00

specify static for a backdrop which doesn't close the modal on click.文档很清楚阿

clino

2014-01-15 15:29:55 +08:00

@cutehalo 你的这个版本确实是可以的,我之前试的是用javascript调用的方式,我再试试看

cutehalo

2014-01-15 17:17:54 +08:00

@clino http://jsfiddle.net/yPzHp/1/ 这样就好了

clino

2014-01-22 22:45:26 +08:00

@cutehalo 最后试过了直接加上一个
$('#myModal').modal({
backdrop: 'static'
})
就好了.
不过有点奇怪,这种我记得之前试过不行的,不知道之前哪里搞错了.