javascript - 向特定模态类添加额外的 css 属性

Question

如何为特定模式添加自定义 CSS？模态可以有很多，定义在模态类中。 (例如:模态 1、模态 2、模态 3 等) modal-overlay类会在modal被点击时生成(materializecss框架)

<div id="modal3" class="modal modal3">
    <div class="modal-content">
        <h4>Congratulation</h4>
        <div class="row martop-20">
            <p>HQ1379622</p>
            <p>HQ1379622</p>
            <p>HQ1379622</p>
            <p>HQ1379622</p>
        </div>
        <a class="btn-grab btn-select-pop waves-effect" href="#modal1">OK</a>
    </div>
</div>

<div class="modal-overlay" style="z-index: 1002; display: block; opacity: 0.5;"></div>

模态叠加层只会在模态处于事件状态时生成。

我需要为这个特定的模式覆盖更改背景/一些 css。

这是显示模态时的输出，模态叠加将在模态关闭时移除。

Answer 1

#modal3 + .modal-overlay {
  background-color: #bada55;
}

似乎叠加层总是直接显示为模态的下一个相邻元素。因此，只需选择模态本身紧随其后的 .modal-overlay。

有关 adjacent sibling 的更多信息