javascript - 如何使用avgrund创建两个弹出窗口，而不同时显示它们？

我正在尝试使用js库Avgrund创建两个弹出窗口。问题是，每当我在同一页面上有两个表单时，无论何时调用activate函数，都将同时激活这两个表单。

总而言之，javascript-用户按下登录或注册按钮，并导致调用以下内容：

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

这将在表单中添加“活动”类，并使两种表单均显示签名的avgrund过渡和弹出窗口。 querySelector的目的是仅修改具有与之关联的特定id（selector）的aside元素。这应该导致仅弹出具有特定ID（“＃login”或“ #signup”）的表单。

搁置元素的类别（登录和登录形式）根据每个按钮而更改-但都显示弹出窗口。最后，其中一种形式总是显示在另一种形式的顶部。

这是CodePen中问题的简化版本

最佳答案

您可以为此使用Avgrund jQuery插件。对于原始的Avgrund概念，这是一种跨浏览器的安全，灵活的包装器。

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