JavaScriptでサイト訪問時に1回だけ表示するモーダルウィンドウ
3277 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
カフェとかショッピングサイトでサイト閲覧者全員に伝えないといけない内容を1回だけページに表示するのが時々ありますよね。
それをJavaScriptとsessionStorageを使って実装します。
それでは説明します。
デモサイト
デモはここから見る事ができますが一度モーダルを閉じるとモーダルは出ないのでサイトを閉じてもう一度デモサイトのURLを入力してデモサイトを見てください。
考え方とコード
一度モーダルウィンドウを見たらキャッシュを残すのですが「セッション」というのを使います。
セッションとは「Webサイトに訪問してからサイトを離れるまでの間の他のページに移動するとかの一連の通信」の事を指します。
セッションの間だけモーダルウィンドウを見たという情報を保存する事でサイト閲覧時の1回だけモーダルウィンドウを表示するのを実現します。
サイトを離れたらセッションは無くなるのでサイトをまた訪問したらモーダルウィンドウは表示されるし（そんな人はいないと思うけど）30分とかの長時間サイトにいたらセッションは無くなるので注意してください。
セッションをプログラミングで使う時は「sessionStorage」を使いますがこの記事に詳しい説明がありますのでそれを読んでください。
それではコードの解説ですがCSSに関しては必要な内容しか説明しないので説明しない部分は自分で理解してください。
HTML
HTMLのコードを↓にします。
CSS
CSSのコードを↓にします。
CSSに関してですが今回の内容はサイトを作る際に実装する事を想定しています。
サイトを作る時に必ずreset.cssを入れるので私が普段使うreset.cssを記載しています。
私が使うreset.cssを使わなくてもいいので必ず自分が使うreset.cssを入れてください。
これで↓の表示になりモーダルウィンドウは表示されていない状態になりますがJavaScriptで表示できる様にします。
JavaScript
まず画面を読み込んだ時にモーダルを表示できる様にするためにJavaScriptのコードを↓にします。
次は「sessionStorage」を使うためにJavaScriptのコードを↓にします。
「disp_popup」と「on」の名前は何でもいいですが5行目と6行目の「disp_popup」は同じ名前にしてください。
6行目の「sessionStorage.setItem(‘disp_popup’, ‘on’)」ですが「sessionStorage.setItem(‘key’, ‘value’)」の形で使い通常はvalueを他の所で置いておいてここで使用するのですが今回はそれがないので「’on’」ただ書いているだけです。
6行目の「sessionStorage.setItem」は「データを保存する」という意味で今回だと「サイトに訪問しているキャッシュがある」という事です。
5行目の「sessionStorage.getItem(‘disp_popup’)」は「保存したデータを取得する」という意味で今回だと「サイトに訪問しているキャッシュがあるのを認識する」という事です。
だから5行目〜7行目は「サイトに訪問しているキャッシュがないならキャッシュがある状態にする」という意味でこれがあるのでサイトを訪問時に1回だけモーダルウィンドウを表示するのが実現できます。
最後にサイトを閲覧した時に最初の1回だけモーダルを表示するためにJavaScriptのコードを↓にします。
HTMLの11行目〜15行目ですがCSSで非表示にします。（CSSの81行目）
そしてJavaScriptで表示できる様にするのですがJavaScriptのコードの7行目と8行目です。
7行目でクラス名が「popup-wrap」のセレクタを取得します。
8行目で「active」クラス（CSSの85行目〜88行目）を追加します。
9行目〜11行目は「popup-wrap」クラスをクリックしたら「active」クラス（CSSの85行目〜88行目）がなくなってモーダルがなくなる為の記述です。
これで完成です。