Ребята, здравствуйте.
Прошу прощения за тупую формулировку, не знал как корректно сформулировать вопрос.
В общем суть ситуации:
Хочу завернуть выбор атрибута товара в модальное окно, которое уже есть в теме. Повесил нужные теги на обёртку в цикле, всё прекрасно.
Нарыл скрипт, который разделяет модальные окна по индексу, собрал франкенштейна, но не могу грамотно закрыть окно.
var modalparent = document.getElementsByClassName("secondary"),
modal_btn_multi = document.getElementsByClassName("toggle-sidebar"),
span_close_multi = document.getElementsByClassName("toggle-close"),
overlay = document.getElementById( 'woostify-overlay' );
html = document.documentElement;
// When the user clicks the button, open the modal
function setDataIndex() {
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].setAttribute('data-index', i);
modalparent[i].setAttribute('data-index', i);
span_close_multi[i].setAttribute('data-index', i);
}
}
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].classList.add( 'active' );
html.classList.add( 'sidebar-mobile-open' );
if ( overlay ) {
overlay.classList.add( 'active' );
}
};
// When the user clicks on <span> (x), close the modal
span_close_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].classList.remove( 'active' );
html.classList.remove( 'sidebar-mobile-open' );
overlay.classList.remove( 'active' );
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modalparent[event.target.getAttribute('data-index')]) {
modalparent[event.target.getAttribute('data-index')].classList.remove( 'active' );
}
};
По кнопке
span_close_multi всё замечательно закрывается, кликом по внутренности прячется сама модалка, но не оверлей, а кликом по оверлею вообще ничего не происходит.
Помогите посильно, пожалуйста.
Простой
