Skip to content Skip to sidebar Skip to footer

Multiple "close" Buttons On Modal

I am using the modals found here on Codrops. These modals have one close button (also closes when you click outside the modal), but I want to add more. The JavaScript is below: var

Solution 1:

The problem is likely that addEventListener only works on a single element at a time and close is a collection of elements. You're probably better off adding an event listener to the modal itself and checking for the md-close class:

modal.addEventListener('click', function (ev) {
    if (classie.has(ev.target, "md-close")) {
        ev.stopPropagation();
        removeModalHandler();
    }
});

Then you can ditch your close = ... variable as well.

Solution 2:

Change

close.addEventListener( 'click', function( ev ) {
            ev.stopPropagation();
            removeModalHandler();
        });

Into

document.addEventListener( 'click', function( ev ) {
            if (classie.has(ev.target, "md-close")) {
                ev.stopPropagation();
                removeModalHandler();
            }
        });

And it will works!

NOW... I thought applying this hack solved also my problem as I wanted to add .md-close on my .md-trigger link to close a modal and open a new one but it didn't work! Someone could help me on this?

How to display a new modal window hiding the previous one?

Thanks!

Post a Comment for "Multiple "close" Buttons On Modal"