解决多层模态框的滚动条混乱问题

我们开始做HTML的时候，我们需要把一些页面做成模态框，而不是直接做成页面给显示出来，而是让我们通过点击某个按钮或者触发事件又或者利用焦点事件来进行触发使该模态库显示出来。
比如我们平常可以看到的为新增、修改和详情，这个时侯我们可以使用到模态框，模态框最常用到的就是Bootstrap4里面的模态框。如果但我们只是打开一个模态框的话，这时完全是没有什么任何问题的。
如果我们再往模态框里面再嵌套一个模态框的话，这时就会出现一个问题，就是当我们打开第一个模态框的时候是没有问题的，但当我们再点开第二个模态框的时候也是没问什么问题，但是当我们再关闭第二个模态框时会出现一个问题就是滚动条混乱，也就是我们再滚动鼠标的时候我们会发现我们滑动的不是第一个模态框，而是我们页面上的页面，假如我们的页面数据不超出的话就会发现我们滑动不了第一个模态框。事实上就是会导致第一个模态框的滚动条消失，这时如果模态框的大小太大的话就会看不完全模态框的信息而没法进行下一步的操作。
这个时候，当我们点开全部模态框的时候，然后再关闭第二个的模态框。然后这时滚动条是出现，但是却不是模态框的，而是页面的滚动条而已，不过能滚动的只不过时页面内容，这是因为页面内容高度太大而产生的，和模态框没有任何关系。
这时我们可以直接来在模态框最大盒子那里给它加一个样式overflow-y:scroll，这时我们可以发现解决模态库滚动的问题，但是这时就会出现两个滚动条,我们来看一下效果图：

也就是在使用Bootstrap中模态框过程中，如果出现多层嵌套模态框的时候，如打开模态框1，然后在1中打开模态框2，在关闭2之后，如果1的内容比较多，模态框1滚动条会消失，从而变为Body的滚动条，这是由于模态框自带的遮罩的问题。了解到基本原因是由于遮罩造成的，那么我们就可以重新增加遮罩，即在关闭b之后，重新给body增加遮罩。
解决方法：很简单，就是在第二个模态框关闭时，给body添加一个类名，而这个类名是Bootstrap4自带有样式的。
然后接着我们来利用模态框事件来解决这些滚动条的问题，有或者滚动条消失的问题了，模态框里面有一个事件就是当我们的模态框完全对用户隐藏时才会触发的事件，也就是当我关闭第二个的模态框的时候，我们给body添加一个class，而这个类自带是有样式的。
具体操作：也就是监听事件，当我们监听到第二个模态框的关闭方法hide被调用了之后就马上触发另一个事件，下面请看代码：

我们只需这句代码放在我们的打开模态框那个方法里面就可以了，因为这个事件是当我们的模态框完全隐藏才会触发的。这时候我们可以创建一个Demo来进行测试一下，我们会发现之前的问题已经解决了。