оживить скрипт в IE

199

24 апреля 2018, 02:33

Доброго дня! Скрипт работает везде, кроме IE. Помогите разобраться. Что ему не нравится?

const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
    const trigger = button.getAttribute('data-modal-trigger');
    const modal = document.querySelector(`[data-modal=${trigger}]`);
    const contentWrapper = modal.querySelector('.content-wrapper');
    const close = modal.querySelector('.close');
    close.addEventListener('click', () => modal.classList.remove('open'));
    modal.addEventListener('click', () => modal.classList.remove('open'));
    contentWrapper.addEventListener('click', (e) => e.stopPropagation());
    modal.classList.toggle('open');
});
}

Полный пример тут

Answer 1

Вот, что нашел из того, что не поддерживается в IE в вашем коде:

У вас используются кавычки из шаблонных строк из ES6 - `
конструкции for of
стрелочные функции
Также заменены let и const, они имеют базовую поддержку в IE-11, но не полностью поддерживаются, так что на всякий случай заменил их на var.

Вот код переделанный:

const buttons = document.querySelectorAll('button[data-modal-trigger]');
for(let i = 0; i<buttons.length; i++) {
    modalEvent(buttons[i]);
}
function modalEvent(button) {
button.addEventListener('click', function() {
    const trigger = button.getAttribute('data-modal-trigger');
    const modal = document.querySelector('[data-modal=' + trigger + ']');
    const contentWrapper = modal.querySelector('.content-wrapper');
    const close = modal.querySelector('.close');
    close.addEventListener('click', function() {modal.classList.remove('open')});
    modal.addEventListener('click', function() {modal.classList.remove('open')});
    contentWrapper.addEventListener('click', function(e) {e.stopPropagation()});
    modal.classList.toggle('open');
});
}

И полный код на jsfiddle: https://jsfiddle.net/wur8gnpe/4/

Правда там теперь некорректно работает анимация, но это надо смотреть поддержку css браузера.