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

Question

我正在尝试使用 js 库创建两个弹出窗口 Avgrund .问题是每当我在同一页面上有两个表单时，只要调用激活函数，它们都会被激活。

总结 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”)的表单弹出。

aside 元素(登录和登录表单)的类根据每个按钮进行更改 - 但都显示弹出窗口。最后，其中一种形式总是显示在另一种形式之上。

这是 CodePen 中问题的简化版本

Answer 1

您可以为此使用 Avgrund jQuery 插件。它是对原始 Avgrund 概念的更跨浏览器安全和灵活的包装器。

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