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

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

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

各种CSS样式控制优先级（解决样式冲突）

发表于8年前(Dec 24, 2014 2:36:42 PM) 阅读 4127 评论 0

分类: WEB前端 CSS

CSS控制页面样式有四种方法：

1、行内方式
行内方式是4种样式中最直接最简单的一种，直接对HTML标签适用style=””，例如：
<p style=”color:#F00; background:#CCC; font-size:12px;”></p>
虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。

2、内嵌方式
内嵌方式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：
<style type=”text/css”>
<!–
#div1{width:64px; height:64px; float:l

......