Bootstrap 4 如何制作不阻塞或影响背景和滚动的模态答案

【问题标题】：Bootstrap 4 how to make modal that doesn't block or affect background and scrollingBootstrap 4 如何制作不阻塞或影响背景和滚动的模态
【发布时间】：2018-01-16 16:21:22
【问题描述】：

我正在尝试创建将显示的 Bootstrap 模式，同时仍允许用户与网站的其余部分进行交互。到目前为止我已经完成的步骤是：

在模态 div 中添加了 data-backdrop="false" 以隐藏背景阴影
添加了keyboard: false以防止通过键盘ESC关闭模态

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

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

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

那么，有没有办法在框架支持的 Bootstrap 4 中做到这一点，或者你不得不使用自定义 CSS 类？

【问题讨论】：

如果用户仍然可以与网站的其他部分进行交互，那么它就不是真正的模式。

标签： css twitter-bootstrap bootstrap-4

【解决方案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;
}

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

【讨论】：

这很好！知道如何使它适用于一个特定的模式而不是页面上的所有模式吗？

【解决方案2】：

我通过消除对 Bootstrap 打开模式的依赖并使用自定义 CSS 解决了这个问题。如果我们以Bootstrap Modal example 为起点，您需要这样做：

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

使用我之前留下的自定义 CSS 来定位：

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

使用类似Animate.Css 的东西来提供模式打开的介绍。要模拟 Bootstrap 的功能，您可以使用 fadeInDown，得到：<div id="modalDialog" class="modal-dialog animated fadeInDown">
如果您想要关闭动画，只需创建自定义 JavaScript 函数，您可以通过单击按钮调用该函数。关闭函数示例：$("#modalDialog").addClass('animated fadeOutDown');

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

【讨论】：