前端(一):模态框(modal)出现时页面抖动情况的解决方法

首先,还是说一下这个抖动的情况是怎么的。当你打开模态框时,页面的内容会缩小一下,感觉就是padding-left:5px;突然变成了padding-left:20px;这样会给人一种页面“抖”了一下的感觉。

一般出现页面“抖”一下的解决方法主要针对具体情况,这里可能涉及的不全,希望大家见谅。

本次使用的各种插件的版本为:

jQuery@3.1.1

Bootstrap@3.3.0

情况一:页面没有滚动条

talk is cheap,先上代码,一面是一段简陋的测试代码,在代码中,页面是不存在滚动条的。


  
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bootstrap中模态框(modal)出现页面抖动解决办法 </title>
  6. <!-- 添加bootstrap和jQuery库-->
  7. <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
  8. <script src="./jquery-3.1.1.min.js"> </script>
  9.          <script src="./bootstrap/dist/js/bootstrap.js"> </script>
  10. </head>
  11. <style>
  12. body{
  13. /*先把滚动条注释掉
  14. overflow-y:scroll;*/
  15. }
  16. .div_1{
  17. background-color:red;
  18. min-height: 50px;
  19. }
  20. </style>
  21. <body class="container">
  22. <!--用来观察抖动情况的div-->
  23. <div class="row">
  24. <div class="col-xs-12 div_1"> </div>
  25. </div>
  26. <!--点击这个按钮就能显示模态框-->
  27. <button data-toggle="modal" data-target="#new_blog_success_block">click </button>
  28. <!--模态框代码-->
  29. <div class="modal fade" id="new_blog_success_block" tabindex="1" aria-labelledby="new_blog_success" aria-hidden="true">
  30. <div class="modal-dialog">
  31. <div class="modal-content">
  32. <div class="modal-header">
  33. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
  34. <h4 class="modal-title">标题 </h4>
  35. </div>
  36. <div class="modal-body">
  37. 内容
  38. </div>
  39. <div class="modal-footer">
  40. <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
  41. <button type="button" class="btn btn-primary">查看 </button>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

先来运行一波代码。运行出来结果如下图1-1所示。


图1-1

发这个图不是为了让你看看这页面多丑,而是证明一下这是在没有滚动条的情况下进行测试的。

然后点击按钮,弹出模态框,这时候就能发现红色div的右边“抖”了一下,来回几次仔细看看你就能发现其实不是“抖”了一下,确切的说是右边变短了一截。这时候我们配合一下控制台来研究研究这是什么情况。

关闭模态框,打开控制台,此时显示应该如下图1-2所示。


图1-2

此时别关闭控制台,我们点击按钮,弹出模态框。再来观察控制台有什么变化。此时模态框如图1-3所示。


图1-3

看见没有,此时body标签多出了一个style="padding-right:32px;"所以才会导致div右边短了一截。再关闭模态框,看看原本body(.container)的padding。如图1-4所示。


图1-4

这是就能清楚的看到class="container"已经设置了padding-right:15px;

为了保证模态框弹出来的时候container的padding-right不被改变,我们就要在我们的样式中添加如下代码


  
  
  1. .container{
  2.      padding-right: 15px !important;
  3. }

这样,模态框再弹出来也不会改变了。

情况二:页面有滚动条

根据情况一的描述,我们已经知道页面没有滚动条时主要就是一个padding-right的问题。那么有滚动条又是个什么情况?其实也只是比情况一多了一点点而已。

再来我们的测试代码,此时我们要给页面加一个滚动条。


  
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bootstrap中模态框(modal)出现页面抖动解决办法 </title>
  6. <!-- 添加bootstrap和jQuery库-->
  7. <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
  8. <script src="./jquery-3.1.1.min.js"> </script>
  9.          <script src="./bootstrap/dist/js/bootstrap.js"> </script>
  10. </head>
  11. <style>
  12. body{
  13. /*注意!有滚动条了*/
  14. overflow-y:scroll;
  15. }
  16. .div_1{
  17. background-color:red;
  18. min-height: 50px;
  19. }
  20. </style>
  21. <body class="container">
  22. <!--用来观察抖动情况的div-->
  23. <div class="row">
  24. <div class="col-xs-12 div_1"> </div>
  25. </div>
  26. <!--点击这个按钮就能显示模态框-->
  27. <button data-toggle="modal" data-target="#new_blog_success_block">click </button>
  28. <!--模态框代码-->
  29. <div class="modal fade" id="new_blog_success_block" tabindex="1" aria-labelledby="new_blog_success" aria-hidden="true">
  30. <div class="modal-dialog">
  31. <div class="modal-content">
  32. <div class="modal-header">
  33. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
  34. <h4 class="modal-title">标题 </h4>
  35. </div>
  36. <div class="modal-body">
  37. 内容
  38. </div>
  39. <div class="modal-footer">
  40. <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
  41. <button type="button" class="btn btn-primary">查看 </button>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

此时我已经把注释中的滚动条放出来了,运行代码,注意看图2-1最右边的滚动条。


图2-1

此时再点一下按钮,观察红色div的“抖动”。

更嚣张了对不对?之前才是右边“抖”,现在是两边一起“抖”。我们接着看控制台。此时控制台显示如图2-2。


图2-2

新增了一个padding-right:32px;这个我们已经见过了,老样子,样式中加以下代码。


  
  
  1. .container{
  2.      padding-right: 15px !important;
  3. }

再来试试。发现它还是在“抖”,什么情况?咱们仔细观察一下,来来回回好几次,谁都能发现了。

注意我们打开模态框之前页面是这样的,图2-3。


图2-3

打开之后如图2-4。


图2-4

发现了么,打开模态框之后,右边的滚动条不见了。所以才导致即使我们把class="container"的padding-right设置为15px不改变之后,页面还是会抖。

这时候不知道你有没有注意到,每次打开模态框之后,body标签都会新增一个class="modal-open",我们看看modal-open有哪些样式。控制台,继续。图2-5。


图2-5

这个.modal-open又把我们设置好的overflow-y:scroll;给覆盖掉了,它里面用了overflow:hidden。怎么办?

给它覆盖回来就好了。在样式中添加如下代码:


  
  
  1. .modal-open{
  2.      overflow-y: scroll;
  3. }

因为用不着x轴的overflow,所以我们暂且不给设置。

再试试打开模态框,没问题了,页面不“抖”了。解决。

总结

1.在页面没有滚动条(主要是y轴滚动条)的情况下,只用给样式中添加如下代码即可:


  
  
  1. .container{
  2.      padding-right: 15px !important;
  3. }

2.在页面有滚动条的情况下,要在第一种情况的前提下新增一个对.modal-open的滚动条设置。所以所需要在样式中添加的代码如下:

.modal-open{
    overflow-y: scroll;
}
.container{
    padding-right:15px!important;
}

后记

看到有些人的解决方法是修改Bootstrap中的代码,大致好像是把添加.modal-open这句给删了。我个人不是很建议这样的做法,因为一方面你能在本地修改别人的代码,但是你修改不了别人电脑中的代码。另一方面,如果你使用bower这样的管理工具,可能你会修改到累死。总的来说,在本地修改别人的代码治标不治本,你能做的只有改好自己的代码,就是这样而已。

如果有什么写的不好的或者大家有什么指正欢迎指出哈。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值