将额外的CSS属性添加到特定的模态类

Question

如何为特定模式添加自定义CSS？可能有许多模态，在模态类别中定义。 （例如：modal1，modal2，modal3等） 单击模态时将生成modal-overlay类（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

据我所知，您的模式和叠加是同级的，因此您可以编写一个简单的函数，如

function applyClassToOverlay(modalId, class) {
  var modal = document.getElementById(modalId);

  var modalOverlay = modal.nextElementSibling;

  modalOverlay.classList.add(class);
}

删除方式

function removeClassFromOverlay(modalId, class) {
  var modal = document.getElementById(modalId);

  var modalOverlay = modal.nextElementSibling;

  modalOverlay.classList.remove(class);
}

如果需要使用特定的id自定义模式，则可以采用另一种方法。您可以简单地编写CSS规则

#modal1 + .modal-overlay {
  // here goes the styling
}

还有一种我可以从屏幕快照中建议的方式。如果我们认为模态叠加始终在所需模态后面1的z-index，我们也可以通过这种方式访问​​叠加

function applyClassToOverlay(modalId, class) {
  var modal = document.getElementById(modalId);
  var modalZIndex - modal.style.zIndex;

  var modalOverlaysArr = [...document.qerySelectorAll('.modal-overlay')];

  var modalOverlay = modalOverlaysArr.find(overlay => overlay.style.zIndex === modalZIndex - 1);

  modalOverlay.classList.add(class);
}

Answer 2

一种方法是使用JavaScript / jQuery。假设您具有某种可以打开模态的功能，例如单击功能……您可以将其连接以检测哪个模态被打开。

使用简单的if语句，我们可以检测某个模式是否打开（或者是否具有类 .open ），如果它返回true，那么我们可以做任何我们想做的事情。

为了简洁起见，我在这段代码中使用jQuery。

$('button').on('click', function(){      
  if($('.modal3').is('.open')) {
    $('.modal-overlay').css('background', 'blue');
    $('.modal-overlay').addClass('newCSS');
  }
});

这是一个起点，经过一些调整，它应该可以根据您的情况进行工作。

Answer 3

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

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

有关adjacent sibling

的更多信息

Answer 4

只需编写一个针对您所需元素的CSS。例如：

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

编辑

如果只需要影响modal3，则将CSS更改为

.modal3{
    background-color: #bada55;
}

如果modal3元素是modal-overlay的后代，那么这应该可以解决问题

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