クリックされたときにモーダルポップアップを生成する jQuery の使用方法

admin 0 Comments Articles

クリックされたときにモーダルポップアップを生成する jQuery の使用方法

モーダルボックスとは、サイトに戻る前にユーザーとの対話を強制するポップアップウィンドウのことです。 モーダル ボックスは、警告、情報ボックスなどに便利です。 モーダル ボックスは、jQuery を使用して作成することができます。 jQuery に慣れていない場合は、「jQuery の基本」の記事で、jQuery の仕組みについて説明していますので、ご覧ください。

これは、HTML、CSS、jQuery、および出力のデモを示す対話型のコード表示です。

Modal HTML

モーダル ポップアップを作成するには、最初に HTML 構造を確立する必要があります。

ポップアップ オーバーレイとポップアップ コンテンツのクラスを作成して、ドキュメントの残りの部分とは別に編集できるようにする必要があります。

この例では、CSS で特定のスタイルを設定できるように、「popup-overlay」と「popup-content」クラスを作成しています。 私たちはポップアップをトリガーしたいボタンを追加しました。 1 つのボタンには “open” というクラスが与えられ、もう 1 つのボタンには “close” というクラスが与えられています。 これらは後でポップアップを開いたり閉じたりするために使用されます。

Modal CSS

CSS では、「popup-overlay」と「popup-content」クラスをスタイルして、それらが最初に隠されるようにする必要があります。 ポップアップが最初から見えていては、ポップアップとは言えません。 クラスの可視性を変更することでポップアップを隠すことができます。

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

さて、ポップアップをいつまでも隠しておきたくないので、ポップアップを表示するときのために CSS で特別なユースケースを作る必要があります。 jQuery を使用して、ポップアップがいつ表示されるべきかを決定するのに役立てます。

jQuery には、アクション (クリックなど) に基づいてクラスを追加および削除する能力があります。 そこで、「開く」ボタンがクリックされたときに「active」というクラスを追加するように jQuery をプログラムすると、ポップアップを表示するために CSS で「active」クラスを使用することができます。 active」クラスをポップアップのクラスに追加し、ポップアップが表示されるときの新しいスタイルを作成します。

この CSS スタイルがどのように見えるかについては、以下の例を参照してください。 jQueryのコードを追加する前に、必ずHTMLドキュメントをjQuery用にセットアップしてください。 その方法がわからない場合は、「Getting Your HTML Ready for jQuery」の記事を参照してください。

そこで、「開く」および「閉じる」の HTML ボタンがクリックされたとき、jQuery は「アクティブ」クラスを追加または削除する必要があります。

この最初のステートメントは、「開く」ボタンがクリックされたときに「アクティブ」クラスを追加します。

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

これが起こると、「アクティブ」クラスがポップアップ クラスに追加され、したがってポップアップの可視性が “visible” に変更されます。 言い換えれば、ポップアップが表示されます。

この2番目のステートメントは、「閉じる」ボタンがクリックされたときに「アクティブ」クラスを削除します。

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

このとき、「アクティブ」クラスはポップアップクラスから削除され、可視性がhiddenに設定されている以前のスタイルに戻されます。

あなたのドキュメントにjQueryの両方のステートメントを追加してください。 このすべてが正しく完了すると、初歩的なモーダルポップアップボックスができます。