bootstrap打开模态modal窗口引起页面抖动解决办法

在使用bootstrap的modal模态窗口组件时，触发后会发现页面有抖动现象。这是因为它隐藏了浏览器滚动条，页面就相当于变宽了，关闭模态窗口后，页面又出现滚动条，页面又变窄了，这一伸一缩就会使页面产生抖动现象。我的解决方法很简单，就是干掉隐藏滚动条的代码。总共删除bootstrap.js文件中6行代码就可以了。

以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例。

第一处在971行左右，删除这3句

this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')

第二处1081行左右，也删除3句

that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()

这样就好了。都是写无关紧要的代码，给body加内边距的，不会影响其他组件的运行。

用法

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 <body> 元素添加 .modal-open类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

通过 data 属性

不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过 JavaScript 调用

只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal(options)

参数

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

中文文档：http://v3.bootcss.com/javascript/#modals

转载至：http://www.dijing.me/bootstrap/10.html

bootstrap打开模态滚动条modal窗口引起页面抖动解决办法相关推荐

纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
窗口迅速关闭的解决办法/scanf/if/for/break
break if的格式 if(a>b) { printf("max=%d\n",a); } else printf("max=%d\n",b); scan ...
office2016激活后还显示激活页面的解决办法
win10系统的office16通过Office激活工具激活之后,但是打开之后还会出现提示"让我们开始吧"的激活的页面, 1.office2016激活后还显示激活页面的解决办法以 ...
apache 安装后默认主页无法打开_CAD教程：CAD软件打开图纸后钢筋符号无法读取的解决办法...
设计师在日常绘图工作中经常会用CAD软件打开其他人发送过来的结构图纸,图纸打开后有些时候会出现钢筋符号显示为问号的情况.那么作为一名CAD遇到这种状况该如何解决呢?小编仔细研究了一下发现大致情况分为两 ...
打开Office时出现“运行时错误91”问题的解决办法
打开Office时出现"运行时错误91"问题的解决办法一.将 C:/Documents and Settings/All Users/Application Data/Micro ...
Intellij IDEA 重置所有工具栏 Intellij IDEA 中的 Debug 控制台输出窗口不见了的解决办法
Intellij IDEA 中的 Debug 控制台输出窗口不见了的解决办法在 Debug 工具窗口,如图点击左侧重置布局图标,你的console窗口就还原了.
打开excel提示损坏的映像的解决办法
打开excel提示损坏的映像的解决办法根据提示找到相应的目录,将提示的dll文件选定,右键属性,依次点击安全,编辑,在其中勾选读取和执行为允许(默认为允许),将读取勾选为拒绝(默认问允许),然后依次 ...
Python使用opencv打开笔记本摄像头时遇到的问题及解决办法
Python使用opencv打开笔记本摄像头时遇到的问题及解决办法最近在学习python,想用opencv做个人脸检测,打开笔记本摄像头时遇到了问题.摄像头总是闪一下就关闭,并提示一行警告([ WA ...
打开excel，提示 flash play2 错误，解决办法
打开excel,提示 flash play2 错误,解决办法,下载附件的东东,然后解压安装即可 ISScript.msi安装补丁.zip (4.8 MB) 下载次数: 0

bootstrap打开模态滚动条modal窗口引起页面抖动解决办法

bootstrap打开模态modal窗口引起页面抖动解决办法

用法

通过 data 属性

通过 JavaScript 调用

参数

bootstrap打开模态滚动条modal窗口引起页面抖动解决办法相关推荐

最新文章

热门文章