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

2014-01-15 09:49:35 +08:00
 clino
//前端菜菜鸟一只
我想要的是 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就会消失

不知道有没有办法可以做到?
14039 次点击
所在节点    CSS
13 条回复
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
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
2014-01-22 22:45:26 +08:00
@cutehalo 最后试过了直接加上一个
$('#myModal').modal({
backdrop: 'static'
})
就好了.
不过有点奇怪,这种我记得之前试过不行的,不知道之前哪里搞错了.

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

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

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

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

© 2021 V2EX