Добавление дополнительного атрибута css к определенному модальному классу

Question

Как я могу добавить настройку CSS для конкретного модального?Там может быть много модальных, которые определены в классе модальных.(Например: modal1, modal2, modal3 и т. Д.) Класс наложения модалов будет создан при щелчке по модалу (frameworkizeizecss)

<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 для этого конкретного модального оверлея.

Это вывод, если модальныйis show, и наложение модального слоя будет удалено при закрытии модального окна.

Answer 1

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

Кажется, что оверлей всегда отображается непосредственно как следующий соседний элемент модального стиля. Так что просто выберите непосредственно следующий .modal-overlay самого модала.

Больше информации о соседнем брате

Answer 2

Насколько я вижу, ваши модалы и оверлеи являются братьями и сестрами, поэтому вы могли бы написать простую функцию, такую ​​как

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 3

Одним из способов является использование JavaScript / jQuery. Предполагая, что у вас есть какая-то функция, чтобы открыть ваш модал, например, функция по щелчку ... вы можете подключиться к ней, чтобы определить, какой модальный режим открыт.

С помощью простого оператора if мы можем определить, открыт ли определенный модал (или, скорее, имеет класс .open ), если он возвращает true, тогда мы можем делать все, что захотим.

Для краткости я использую jQuery в этом коде.

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

Это отправная точка, и с небольшой адаптацией она должна работать в вашей ситуации.

Answer 4

Просто напишите CSS, который нацелен на нужный вам элемент. Например:

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

EDIT

Если вам нужно повлиять только на modal3, измените CSS на

.modal3{
    background-color: #bada55;
}

если элемент modal3 является потомком modal-overlay, то это должно сработать

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