Bootstrap Modal 模态框弹出页面抖动问题

最新推荐文章于 2022-12-01 17:22:24 发布

原创最新推荐文章于 2022-12-01 17:22:24 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

10 篇文章

订阅专栏

本文提供了一种解决在使用Bootstrap模态框时页面出现抖动问题的方法，通过调整CSS样式，确保页面滚动条的一致性，从而避免模态框弹出时页面布局的不必要变动。

解决bootstrap 模态框弹出时，页面抖动问题

body {
    padding-right: 0px !important; overflow-y: scroll;
}
*.modal-open {
    padding-right: 0 !important; overflow-y: scroll;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RightHereWaitingFY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

08-31

Bootstrap的Modal模态框是网页设计中常用的交互元素，它允许在不离开当前页面的情况下显示额外的信息或功能。本文将深入探讨如何扩展Bootstrap的Modal模态框，实现动态添加和弹出多个Modal框。首先，我们需要理解...

BootStrap中的模态框（modal，弹出层）功能示例代码

10-17

在Bootstrap框架中，模态框（Modal）是一种非常实用的组件，它允许用户在当前页面上弹出一个对话框，而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项，使得开发者能够轻松创建各种类型的弹出窗口，如...

参与评论您还未登录，请先登录后发表或查看评论

Bootstrap中模态框（modal）出现时页面抖动情况的解决方法

fd214333890的专栏

05-10

7230

首先，还是说一下这个抖动的情况是怎么的。当你打开模态框时，页面的内容会缩小一下，感觉就是padding-left:5px;突然变成了padding-left:20px;这样会给人一种页面“抖”了一下的感觉。一般出现页面“抖”一下的解决方法主要针对具体情况，这里可能涉及的不全，希望大家见谅。本次使用的各种插件的版本为：jQuery@3.1.1Bootstrap@3.3.0情况一：页面没有滚动条tal...

Bootstrap模态框导致页面抖动问题

@不喝海之言@

12-17

1427

Bootstrap模态框导致页面抖动简单介绍Bootstrap模态框： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。学习bootstrap模态框可以去：菜鸟教程（Bootstrap 模态框（Modal）插件） Bootstrap官网 模态框导致的页面抖动问题说明： 模态框导致...

解决bootstrap中模态框显示后页面抖动的问题

Smileku

08-10

2727

$(function(){ if($("modal").show()){ $("body").css({"overflow":"hidden","margin-right":"15px;"}) $("modal").css({"overflow":"auto","overflow-y":"scroll;"}) } })

弹出框 custombox.min.js 使用时候由于滚动条隐藏造成网页抖动变形的解决办法

weixin_30289831的博客

08-28

269

custombox.min.js版本v3.0.2 使用custombox.min.js结合bootstrap实现的弹出框，每次弹出隐藏滚动条时候，网页内容总是会移动，感觉不好打开custombox.min.js文件，定位到下边代码 a.classList.add("custombox-scrollbar"),document.body.appendChild(a); 这里的cust...

bootstrap中使用模态框造成页面抖动的处理方法

dtgy2009的博客

12-01

369

Bootstrap模态框切换时页面抖动

在iframe中使bootstrap的模态框在父页面弹出问题

08-29

Bootstrap是当前Web开发中最流行的前端框架之一，提供了许多实用的UI组件，包括模态框，但是当我们在使用iframe时，bootstrap的模态框就会出现问题，即模态框弹出的位置是以子页面为标准居中的，并且遮罩层也只有子...

bootstrap模态框弹出效果

06-24

Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许在当前页面上以弹出窗口的形式展示内容，而无需跳转到新的页面。Bootstrap框架提供了丰富的模态框功能，包括动画效果、可定制的样式以及方便的API，...

解决Bootstrap模态框切换时页面抖动 or页面滚动条

学如逆水行舟，不进则退

11-23

3761

Bootstrap为了让所有的页面（这里指内容溢出和不溢出）显示效果一样，采取的方法如下：当Modal显示时，设置body -- overflow:hidden;margin-right:15px;（设置15px是因为浏览器的滚动条占位是15px）;（通过在modal显示时给body添加.modal-open类实现）　　　　　　　　设置modal -- overflow:auto;

使用Bootstrap插件：模态窗口

cune1359的博客

07-02

358

使用Bootstrap插件：模态窗口 Bootstrap在Web设计师和开发人员中广受欢迎，在此网站BuiltWithBootstrap中，您可以看到许多网站都采用Bootstrap作为其网站或webapps的基础。在上一篇文章中，我们介绍了Bootstrap中的一些UI组件。这次，在本文中，我们将探讨Bootstrap插件。如前所述，Bootstrap附带了许多自定...

iview使用Modal时打开关闭页面抖动问题

hellolipop

08-31

1244

在使用iview的Modal时经常会出现抖动的问题，其实大多数的ui库都有这个问题，最好笑的是iview的文档本身也是有这个问题的。言归正传，这样的抖动是肯定不会让客户满意的，这时候该怎么解决呢？当然是开动你的小脑经，打开调试窗口，打开你的Modal，当模态框打开关闭时，你的body是不是多了点东西这就是罪魁祸首了。知道了具体是什么原因导致的，那解决起来就简单了，在打开和关闭的时候弹框会分别先加上overflow: hidden导致你的页面滚动条没了，关闭的时候移除样式。这就是抖动为什么会发生的主

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

dixi6227的博客

12-17

378

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

Bootstrap 使用弹窗 Modal 时页面抖动

灵台方寸山斜月三星洞

05-15

932

弹出 Modal 时页面抖动，原因有二：一、弹窗一出 .modal-open 会添加到body上，并且改变其尺寸弹窗前： <body class="container"> 弹窗后： <body class="container modal-open" style="padding-right: 32px;"> 二、弹窗一出页面的滚动条会被隐藏如果页面原本没有...

bootstrap 模态框抖动问题解决

m0_37400258的博客

05-02

2817

1.当页面没有出现滚动条的时候，我的模态框未抖动 2，出现的时候，页面一闪一闪的 3.修改css起作用的代码 body.modal-open { padding-right: 0 !important; overflow-y: scroll; }

弹出模态框的时窗口抖动问题

tangmin的博客

08-23

3671

这个是这两天在写界面的时候发现的一个问题，开始没有重视也不知道是因为模态框引起的，后来仔细看了一下点击弹出模态框的按钮和其他普通按钮的反应是不同的，只有模态框弹出的时候会抖动。找到问题后于是想可不可以解决。很不错的是很快找到了本质问题和解决方法。问题根源:①在点击按钮弹出模态框的时候body的padding-rignt属性值会增大。再关闭模态框的时候padding-rigt属性值恢复到原先自己...

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

H5爱好者

07-05

4913

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

Bootstrap模态框弹出时页面抖动最简单的解决办法

qq_41609477的博客

07-03

692

Bootstrap模态框弹出时页面抖动最简单的解决办法在css中添加以下样式即可 .modal-open { overflow-y: auto !important; padding-right: 0 !important; }

掌握Bootstrap模态框弹出效果的多样化实现

模态框通常具有覆盖在页面内容之上的半透明层，以及一个可自定义的弹出框体。用户可以通过点击触发元素（如按钮）来显示或隐藏模态框。在了解Bootstrap模态框弹出效果之前，我们需要先熟悉Bootstrap框架的基础知识...