Question

I’m trying to create two popups with the js library Avgrund. The problem is that whenever I have two forms on the same page, both of them are activated whenever the activate function is called.

To summarize the javascript- a user presses either a login or signup button, and causes for the following to be called:

    function activate( state , selector ) {

    var popup = document.querySelector( selector );

    document.addEventListener( 'keyup', onDocumentKeyUp, false );
    document.addEventListener( 'click', onDocumentClick, false );

    removeClass( popup, currentState );
    addClass( popup, 'no-transition' );
    addClass( popup, state );

    setTimeout( function() {
        removeClass( popup, 'no-transition' );
        addClass( container, 'avgrund-active' );
    }, 0 );

    currentState = state;
}

this will add the ‘active’ class to the form, and cause the signature avgrund transition and popup to be displayed- for both forms. The purpose of the querySelector is to modify only the aside element with the specific id(selector) associated with it. This is supposed to cause only the form with the specific id(either ‘#login’ or ‘#signup’) to popup.

The classes of the aside elements(the login and signin forms) are changed according to each of the buttons- but both display popups. Lastly- one of the forms is always shows on top of the other one.

Here is a simplified version of the problem in CodePen

Answer 1

You can use the Avgrund jQuery plugin for this. It’s a more cross-browser safe and flexible wrapper for the origin Avgrund concept.

http://labs.voronianski.com/jquery.avgrund.js