Bootstrap 4如何制作不会阻挡或影响背景和滚动的模态

Question

我试图创建将在允许用户与网站其余部分进行交互时显示的Bootstrap模式。我到目前为止所做的步骤是：

1. 将data-backdrop="false"添加到模态div以隐藏背景阴影
2. 添加keyboard: false以防止通过键盘ESC关闭模态

3. 自定义CSS类，使对话框显示在右下角：

   .modalDialog {
       position: fixed;
       bottom: 20px;
       right: 20px;
       margin: 0px;
   }
   

此更改使模型显示为非阻塞...但仍存在页面无法滚动且元素无法点击的问题。我已经在StackOverflow上尝试了大部分答案，但所有答案都已过时（对于4之前的Bootstrap版本）。

那么，有没有办法在Bootstrap 4中支持框架，或者你被迫使用自定义CSS类？

Answer 1

只需执行以下步骤即可：

1：Bootstrap 4在body标签上添加.modal-open：

.modal-open {
    overflow: hidden;
}

覆盖或添加自定义CSS：

.modal-open {
    overflow: auto !important; // you will need important here to override
}

2：Bootstrap 4还会在身体末端添加一个新的div标签。

只需删除它并将其添加到自定义CSS：

.modal-backdrop {
    display: none !important;
}

您仍然可以通过点击隐藏背景隐藏模态。告诉我，如果这对你有所帮助。

Answer 2

我已经解决了这个问题，因为我不再依赖Bootstrap打开模态，而是使用自定义CSS。如果我们将Bootstrap Modal example视为您需要做的起点：

1. 删除根容器div ...在示例中<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">然后匹配</div>
2. 将id="modalDialog"添加到正文，结果为<div id="modalDialog" class="modal-dialog">

3. 使用我之前离开的自定义CSS定位：

   .modalDialog {
       position: fixed;
       bottom: 20px;
       right: 20px;
       margin: 0px;
   }
   

4. 使用Animate.Css之类的内容为模态打开提供介绍。要模拟Bootstrap的功能，您可以使用fadeInDown，从而产生：<div id="modalDialog" class="modal-dialog animated fadeInDown">

5. 如果您想要关闭动画，只需创建您通过按钮单击调用的自定义JavaScript函数。示例关闭函数：$("#modalDialog").addClass('animated fadeOutDown');

当然，您现在不需要Bootstrap modal()来电。希望它能解决你的问题...我会看看我是否可以创建JsFiddle以获得更好的演示。