指定時間後に自動で開くモーダルウインドウの作り方
指定時間後に自動で開くモーダルウインドウの作り方を紹介します。このサンプルでは、ページを表示してから3秒が経過すると、画面全体へ半透明の背景を重ね、その中央にモーダルウインドウを自動で表示します。クリック操作をきっかけにするのではなく、ページ表示時から時間を計測して指定時間後に開く仕組みです。
会員サイトのお知らせ、ECサイトのキャンペーン案内、管理画面の注意事項、サービス利用時の補足説明など、ページを開いてすぐではなく、少し時間を置いてから案内を表示したい場合に利用できます。JavaScriptのsetTimeoutを使用して表示タイミングを制御し、CSSのクラス切り替えによってモーダル背景と本体を表示します。
モーダル内のタイトルや本文はHTMLから変更でき、CSSではモーダルの横幅、余白、背景色、角丸、影、背景オーバーレイの色などを調整できます。また、JavaScriptの待機時間を変更すれば、3秒以外のタイミングで自動表示することもできます。スマートフォン・タブレット・PCで利用できるレスポンシブ対応の構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ表示から3秒後にモーダルウインドウが自動で開きます。
ページ表示から3秒後にモーダルウインドウが自動で開きます。モーダル内の「もう一度確認する」を押すと非表示へ戻り、3秒後に再び表示されます。「デモを終了する」を押すとモーダルを閉じて動作を終了します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>指定時間後に自動で開くモーダルウインドウ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページ内容 -->
<main class="modal-window-auto-open_wrap">
<!-- タイトル -->
<div class="modal-window-auto-open_title">
指定時間後に自動で開くモーダルウインドウ
</div>
<!-- 説明文 -->
<p class="modal-window-auto-open_text">
ページ表示から3秒後にモーダルウインドウが自動で開きます。
</p>
</main>
<!-- モーダル背景 -->
<div
class="modal-window-auto-open_overlay"
data-auto-open-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-auto-open_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-window-auto-open-title">
<!-- モーダルタイトル -->
<div
class="modal-window-auto-open_modal-title"
id="modal-window-auto-open-title">
お知らせ
</div>
<!-- モーダル本文 -->
<p class="modal-window-auto-open_modal-text">
このモーダルはページ表示から3秒後に自動で開きます。
</p>
<!-- 閉じるボタン -->
<button
class="modal-window-auto-open_close"
type="button"
data-auto-open-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではページ内容とモーダルウインドウ本体を作成し、CSSではモーダル背景、モーダル本体の横幅、余白、背景色、角丸、影などを設定します。JavaScriptではページを表示してから3秒を計測し、指定時間が経過するとモーダル背景へ表示用のクラスを追加してモーダルウインドウを自動で開きます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはページ内容とモーダルウインドウを構成するファイルです。「指定時間後に自動で開くモーダルウインドウ」のタイトル、説明文、モーダル内の「お知らせ」というタイトル、本文を変更できます。ページを開いた直後はモーダル背景に表示用クラスが付いていないため、モーダルウインドウは非表示になっています。
style.cssはページ内容、モーダル背景、モーダル本体のデザインを設定するファイルです。ページ内容の最大横幅、余白、背景色、角丸、モーダル背景の色、モーダル本体の最大横幅、内側余白、角丸、背景色、影などを変更できます。モーダル背景は初期状態ではdisplay:none;で非表示になり、is-showクラスが付くとdisplay:flex;へ切り替わって表示されます。
script.jsは指定時間後にモーダルウインドウを自動で開く処理を行うファイルです。setTimeoutを使用してページ表示から3秒待機し、その後モーダル背景へis-showクラスを追加します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開いた直後は通常のページ内容だけが表示され、3秒が経過すると画面全体へ半透明の背景が表示され、その中央にモーダルウインドウが自動で開きます。
カスタマイズできる内容
index.htmlではページ側のタイトルと説明文、モーダルウインドウ内のタイトルと本文を変更できます。用途に合わせて、お知らせ、注意事項、キャンペーン案内など表示したい内容へ書き換えられます。
style.cssではページ内容の最大横幅、余白、枠線、角丸、背景色、モーダル背景の色、モーダル本体の最大横幅、内側余白、角丸、背景色、影、タイトルの文字サイズ、本文の文字色や行間を変更できます。
script.jsではsetTimeoutに指定している3000を変更することで、ページを表示してからモーダルウインドウが自動で開くまでの待機時間を調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
ページ内容の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ページ内容の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。左右はautoによって中央へ配置されます。
padding:32px;
ページ内容の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
ページ内容を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
ページ側タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
padding:20px;
モーダル背景の内側余白です。値を大きくするとモーダル本体と画面端との間隔が広がり、小さくすると狭くなります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダル本体の内側余白です。値を大きくすると文字とモーダル端との間隔が広がり、小さくすると狭くなります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダル本体の影です。20pxは縦方向の位置、40pxはぼかしの大きさです。値を変更すると影の位置や広がりを調整できます。
font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:0 0 12px;
モーダルタイトルの下側余白です。12pxを大きくすると本文との間隔が広がり、小さくすると狭くなります。
script.js
3000
ページを表示してからモーダルウインドウが自動で開くまでの待機時間です。3000は3秒を表します。5000に変更すると5秒後、1000に変更すると1秒後に表示されます。値を大きくすると表示までの待機時間が長くなり、小さくすると早く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではページ内容にwidth:100%;とmax-width:700px;、モーダル本体にwidth:100%;とmax-width:420px;を指定しているため、画面幅に合わせて横幅が縮小されます。また、画面幅640px以下ではページ内容の内側余白をpadding:24px 18px;へ変更し、モーダル背景にもpadding:20px;を設定しているため、スマートフォン・タブレット・PCで利用できます。
コメント