标签:滚动条

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

发表于1年前(Mar 9, 2017 5:09:29 PM)  阅读 2398  评论 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 Tooltip在页面出现滚动条时定位不准确

发表于1年前(Feb 26, 2017 12:04:52 PM)  阅读 1459  评论 1

分类: JS WEB前端

标签: bootstrap tooltip 定位不对 滚动条

首先我们看下下面的图片:

这是一个表单的验证,笔者的实现方式是在出现错误时,给控件加载一个红色边框,然后再旁边显示一个Bootstrap原生的Toolltip,笔者简单的实现了一下,发现一个问题,如果当页面出现滚动条,将会出现下面的现象:

可以明显看到,提示位置定位错了。但很奇怪的是提示的三角形并没有定位错。

最开始以为是data-container设置错误,后来确认不是data-container设置问题,查了下源码,发现了如下关键的代码:

  Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
    var delta = { top: 0, left: 0 }
    if (!this.$viewport) return d
......