モーダル
デモ
押してください
任意のコンテンツを置いてください。
任意のコンテンツを置いてください。
任意のコンテンツを置いてください。
閉じる
JSコードコピー
使い方
モーダルを表示するためのトリガー要素を１つ用意し、そこにdata-jscopyand="modalTrigger"を付与してください。
モーダル内に表示する任意の要素と、それを囲うdiv要素を１つ用意し、囲った要素にdata-jscopyand="modalBody"を付与してください。
モーダルを閉じるためのトリガー要素をdata-jscopyand="modalBody"の中に１つ用意し、data-jscopyand="modalClose"を付与してください。
解説
まずは３つの要素（開く専用トリガー、モーダル本体、閉じる専用トリガー）をそれぞれ変数に格納します。
続いてモーダルの表示を調整していきます。
全体を囲うdiv要素を変数modalで定義します。
スタイルは最前面に固定表示されるものにします。
画面を黒の半透明で覆うためのdiv要素を変数overlayで定義します。
スタイルはmodalに対して絶対配置で全体を覆う様にし、背景色を黒の半透明に指定します。
モーダル本体を囲うdiv要素を変数containerで定義します。
スタイルはoverlayよりも前面に出るようにし、背景色を白に指定します。
JavaScriptで作った要素をHTMLに追加していきます。
modalはdocument.bodyの一番後ろに配置します。
overlayとcontainerはmodalの中に配置します。
モーダル本体はcontainerの中に配置します。
モーダルの表示を切り替えるための関数を定義します。
modalのdisplayスタイルを切り替えるだけのシンプルなものです。
関数showの設定値は元々設定されているflexにします。
初期状態を非表示にするためhideを呼んでおきます。
各要素にクリックイベントを設定したら完成です。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。