0

jsライブラリAvgrundで2つのポップアップを作成しようとしています。問題は、同じページに2つのフォームがある場合、アクティブ化関数が呼び出されるたびに両方がアクティブ化されることです。

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'のいずれか）を持つフォームのみがポップアップ表示されるはずです。

脇の要素（ログインフォームとサインインフォーム）のクラスは、各ボタンに応じて変更されますが、どちらもポップアップを表示します。最後に、フォームの1つは常に他のフォームの上に表示されます。

これがCodePenの問題の簡略版です

4

3 に答える 3

2

これには、AvgrundjQueryプラグインを使用できます。これは、元のAvgrundコンセプトの、よりクロスブラウザーで安全で柔軟なラッパーです。

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

于 2013-02-04T17:00:55.413 に答える
1

2番目のポップアップを最初のポップアップの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 に答える