問題タブ [avgrund]

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

javascriptを要約すると、ユーザーがログインボタンまたはサインアップボタンのいずれかを押すと、次のように呼び出されます。

これにより、フォームに「アクティブ」クラスが追加され、両方のフォームで署名avgrund遷移とポップアップが表示されます。querySelectorの目的は、特定のid（selector）が関連付けられているaside要素のみを変更することです。これにより、特定のID（'#login'または'#signup'のいずれか）を持つフォームのみがポップアップ表示されるはずです。

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

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

http://github.com/voronianski/jquery.avgrund.js/を使用しています

私のjs呼び出しは次のとおりです。

私のポップアップコンテンツは次のとおりです。

私が欲しいのは、キャンセルをクリックすると、ポップアップが閉じられることです。

ページの読み込み時に jquery (avgrund) モーダル ウィンドウ プラグインを呼び出そうとしていますが、その方法がわかりません。プラグインのページは、ボタンのクリック時にプラグインを呼び出しますが、ページの読み込み時に実行したくありません...

プラグインへのリンクはこちらです... http://labs.voronianski.com/jquery.avgrund.js/

不透明度がページ全体をカバーしていない Web ページがあります。この問題を解決するために z-index を使用しようとしましたが、何らかの理由で機能しません。

ここにウェブページがあります: http://www.fairdash.com/test-page

JSFiddle は次のとおりです: http://jsfiddle.net/4gqs4275/light/

これが私のCSSトライアルです：

成功しないに.avgrund-cover置き換えます。.avgrund-active

に追加.avgrund-active {visibility: visible; opacity: .55;}および削除opacity:1;しました.avgrund-active .avgrund-cover。

注: この問題を解決するには、JSFiddle にあるコードのみを編集できます。

avgrund プラグインを自分のサイトで動作させようとしていますが、ある程度成功しましたが、ぼかし効果と背景効果が正しく機能していません。

サンプル

ここで使用されている css ファイルの正確な複製があり、適切にインポートされています。

このcssからクラス「.avgrund-blur」を削除しようとしました：

ページをぼかすことに成功しましたが、ポップアップ ウィンドウもぼやけました。

サンプルの背後に表示される黒いパターンではなく、なぜ私のサイトの背景が白いのかを理解しようとさえしていませんが、最終的にはそれもまっすぐにする必要があります. 誰でもこれらの問題の原因が何か分かりますか?

編集:背景の問題を解決しました。これは単に html{} background プロパティを設定するだけの問題であることがわかりました。ただし、ぼかしの問題は依然として問題です。