标签:modal

bootstrap弹出多个modal导致前面modal的滚动条失效

发表于1年前(Mar 9, 2017 5:09:29 PM)  阅读 2257  评论 0

分类: JS WEB前端 CSS

标签: bootstrap modal 滚动条

bootstrap在同时使用多个modal时会出现不少问题,笔者博客之前已经讨论过不少,最近笔者又发现一个bug。当你弹出一个modalA,modalA内容比较多,出现纵向滚动条时,如果这时你又弹出modalB,当modalB关闭时,你会发现modalA里面内容的纵向滚动条不见了。

造成这种现象的原因很简单,在弹出新的modal时,会根据当前新modal的内容设置滚动条,如果当前modal足够内容显示,则所有modal的overflow-x,overflow-y属性都会取消掉,要想在关闭时重新显示滚动条,我们重新给需要滚动的modal加上overflow-y:atuo即可,横向相应的就是overflow-x了。又因为我们使用的是auto,给不需要滚动的modal加上也无妨,所以,我们可以很简单的在modal的hidden事件中,给所有的modal加上overflow-x或overflow-y为auto,这样变成全局更方便使用了。

Bootstrap同时弹出多个模态窗口Modal时的几个问题

发表于2年前(Jun 15, 2016 10:47:49 AM)  阅读 12523  评论 2

分类: WEB前端 JS

标签: modal 相互遮盖 偏移 溢出

Bootstrap中的modal组件是使用率比较高的组件之一,可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好,有些人说应该尽量避免同时弹出多个modal,应该关闭之前的modal再弹出新的modal,确实,弹出多个modal会导致页面看起来比较混乱,但不管出于什么原因,我们经常还是会碰到需要弹出多个modal的情况。

首先,碰到的第一个问题就是如果弹出多个modal,会出现相互遮盖的情况。bootstrap对modal的弹层固定了一个z-index,笔者使用的bootstrap版本为3.3.4,z-index值为1050,不同版本可能会不同。使用相同的z-index就会导致后面的弹出层无法遮住前面的弹出层的情况。这时,我们想,如果之后每个弹出层的z-index都能递增就好了,于是,笔者增加了如下代码:

        $(document).on('hidden.bs.modal','.modal',function(e){
     
......

bootstrap模态窗口modal使用remote加载数据的缓存问题

发表于2年前(May 10, 2016 9:16:51 AM)  阅读 6293  评论 0

分类: WEB前端 JS

标签: bootstrap modal remote 缓存 removeData show.bs.modal hidden.bs.modal

模态窗口是很常用的控件,经常用来装载复杂的表单,bootstrap提供的modal模态弹窗提供了data-remote属性,用来指定远程加载的页面。但是该功能有个问题,如果该弹窗实例已经运行一次,则不会加载远程url的内容了,也就是说,如果您使用他加载一个动态表单,加载一次以后,除非刷新页面,再次弹窗依然是上次加载的内容。这个问题也许并不一定是bug,可能作者就是为了性能考虑,特意做的缓存,如果能配置是否缓存就更加完美了。

为了解决缓存问题,有几下几种方案:

1、移除绑定数据

在打开modal之前(show.bs.modal)或者关闭modal之后(hidden.bs.modal)移除之前绑定的数据,可以单独针对一个modal操作,也可以添加全局的监听方法,如:

......