BootStrap模态框窗口抖动问题解决

问题描述

最近在进行项目开发过程中，用到BootStrap这个框架。但是在关闭模态框时遇到窗口抖动问题。

问题分析

正常在使用BootStrap模态框时并不会出现这种问题，我是在一层模态框上面又加了一个操作提示的模态框。官方文档也不推荐这种使用方式，应该是他们经过测试也有这种问题。

产生抖动的原因在于滚动条的出现和隐藏。第一个模态框弹出时，会把滚动条隐藏起来，但是在弹出第二个模态框时，第一个模态框的隐藏功能就会失效，造成页面的抖动。

解决方案

如果一定要在第一个模态框之上弹出第二个模态框。有两种解决思路。

第一：可以通过修改bootstrap的源文件，把隐藏滚动条的功能关闭，但是这种方法涉及到修改框架源码，并不推荐。

第二:按需添加css样式。只要在需要的页面上引入相关的css样式即可。相关代码如下：

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