Question

我正在尝试使用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

中问题的简化版本

Answer 1

您可以使用Avgrund jQuery插件。对于原始Avgrund概念，它是一个跨浏览器安全且更灵活的包装器。

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

Answer 2

您可以在第一个弹出窗口的onUnload属性中加载第二个弹出窗口（使用Avgrund jquery plugin）。

jQuery代码

$("#first").avgrund({
    onUnload: function (elem) {
        $('#second').click();
    },
    template: 'first popup'
});

$("#second").avgrund({
    template: 'second popup'
});

<强> HTML

<a href="#" id="first">Open first popup</a>
<a href="#" id="second" style="display:none;">Open second popup</a>

Answer 3

您可以按如下方式触发Avgrund模式

<强>的JavaScript

＆＃13;

function openDialog() {
  Avgrund.show("#default-popup");
}

＆＃13;

<强> HTML

＆＃13;

<body>
  <button onclick="javascript:openDialog();">Open Avgrund</button>
  <aside id="default-popup" class="avgrund-popup">
    <h2>Header</h2>
    <p>...</p>
    <button onclick="javascript:closeDialog();">Close</button>
  </aside>
</body>

＆＃13;

Source：https://github.com/hakimel/avgrund

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

3 个答案: