Question

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

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);

Answer 1

发现它发生div正在覆盖整个屏幕的诀窍是将css从整个身体改为模态身体。我还需要在这里改变模态的位置是代码。

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

Answer 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}

现在填充模态后，需要从元素中删除'modal'类，如removeClass（“ modal”）

Bootstrap Modal：当模态打开时允许背景交互

2 个答案: