Bootstrap Modal：当modal打开时允许后台交互答案

【问题标题】：Bootstrap Modal: allow the background interaction when modal openBootstrap Modal：当modal打开时允许后台交互
【发布时间】：2016-09-02 12:03:03
【问题描述】：

我正在使用 javascript 创建一个动态模式。当模式打开时，我想允许鼠标在正文上的其他背景元素按钮、输入表单等上进行交互。 modal 的主要代码如下。

element1 = document.createElement('div');
element1.setAttribute("id", "myModal");
element1.setAttribute("role", "dialog");
element1.setAttribute("data-keyboard", "false");
element1.setAttribute("data-backdrop", "false");
element1.className = 'modal fade';
document.body.appendChild(element1);

【问题讨论】：

标签： bootstrap-modal

【解决方案1】：

发现它碰巧 div 覆盖了整个屏幕，诀窍是将 css 从整个 body 更改为 modal body 。我还需要在这里更改模态的位置是代码。

@media screen and (min-width: 768px) {
      #fullHeightModalRight {
          top : 66px;
          left: auto;
          bottom: auto;
        overflow: visible;
      }
  }

【讨论】：

【解决方案2】：

我也遇到了同样的问题，并使用 css 和 js 代码解决了我的问题。 data-backdrop="false" 将仅删除背景黑屏，但不允许您对背景元素执行任何操作。要保持后台交互并将模态保持在中间位置并具有完整视图，您需要在模态生成后使用 js 代码删除“模态”类。并且需要使用一些自定义的 CSS 样式。添加带有模态的自定义类

element1.className = 'modal fade custom-modal';

然后为自定义模态 css 类添加 css

.custom-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
}
//inner css class style//
.modal-dialog{marging:0}

现在填充模态后需要从像 removeClass("modal") 这样的元素中删除“模态”类

【讨论】：