V
V
vita_run2018-02-16 01:38:38
JavaScript
vita_run, 2018-02-16 01:38:38

How to write js code for multiple modals?

How can I change the code to make a modal window on different pages?
those. on one page I have, let's say, a modal window for entering, and on the other for filtering elements. if the id in both blocks use the same, I can write one opening / closing function, etc. for all modal windows, but at the same time just specify on which pages this should happen?

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);
    }
})();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim Zolotoy, 2018-02-16
@spacenear

I did not delve into the code, but recently I wrote a class for modal windows myself - maybe there is an idea there github.com/spacenear/fibe

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question