分类: 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，这样变成全局更方便使用了。

分类: 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

分类: 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操作，也可以添加全局的监听方法，如：