0

我正在尝试使用 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（选择器）的 side 元素。这应该只导致具有特定 id（'#login' 或 '#signup'）的表单弹出。

旁边元素的类（登录和登录表单）根据每个按钮进行更改 - 但两者都显示弹出窗口。最后，其中一种形式始终显示在另一种形式之上。

这是CodePen中问题的简化版本

4

3 回答 3

2

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

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

于 2013-02-04T17:00:55.413 回答
1

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

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>
于 2014-07-24T17:13:46.067 回答
0

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

JavaScript 

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

HTML 

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

来源：https ://github.com/hakimel/avgrund

于 2014-11-29T19:46:02.260 回答