Как написать js-код для нескольких модальных окон?

Question

[vita_run]

Каким образом можно изменить код, чтобы сделать модальное окно на разных страницах?
т.е. на одной странице у меня,допустим, модальное окно для входа, а на другой для фильтрации элементов. если id в обоих блоках использовать одинаковые, я же могу написать одну функцию открывания/закрывания и т.п. для всех модальных окон, но при этом просто указывать на каких страницах это должно происходить?

var modalFilter = document.getElementById('modalWindow'),
    auth = document.getElementById('authorization'),
    home = document.getElementById('home');



function swap()
{
    auth.parentNode.insertBefore(modalFilter, auth);
    home.parentNode.insertBefore(modalFilter, home);
}
swap();


(function () {
    'use strict';


    var mOverlay = getId('modalWindow'),
        mOpen = getId('modalOpen'),
        mClose = getId('modalClose'),
        mContent = getId('modalContent'),
        allNodes = document.querySelectorAll("*"),
        modalOpen = false,
        lastFocus,
        i;

    function  getId(id) {
        return document.getElementById(id);
    }

    function  modalShow() {
        lastFocus = document.activeElement;
        mOverlay.setAttribute('aria-hidden', 'false');
        modalOpen = true;
        mContent.setAttribute('tabindex', '0');
        mContent.focus();
    }

    function modalClose(event) {
        if (modalOpen && (!event.keyCode || event.keyCode == 27)){
            mOverlay.setAttribute('aria-hidden', 'true');
            mContent.setAttribute('tabiindex', '-1');
            modalOpen=false;
            lastFocus.focus();
        }
    }

    function focusRestrict( event ) {
        if (modalOpen && !mContent.contains(event.target)){
            event.stopPropagation();
            mContent.focus();
        }
    }


    mOpen.addEventListener('click', modalShow);
    mClose.addEventListener('click', modalClose);

    document.addEventListener('keydown', modalClose);

    for(i=0; i<allNodes.length; i++)
    {
        allNodes.item(i).addEventListener('focus', focusRestrict);
    }
})();

Comments

[Дмитрий]

Код в теги!!!

Answer 1

[Максим Золотой]

Я не стал вникать в код, но недавно сам написал класс для модальных окон - может там найдется идея github.com/spacenear/fibe