指定時間後に自動で閉じるモーダルウインドウの作り方
指定時間後に自動で閉じるモーダルウインドウを作る方法を紹介します。このサンプルでは、ページを開いたタイミングでモーダルウインドウを表示し、3秒経過すると自動で閉じる仕組みをHTML・CSS・JavaScriptで実装しています。一定時間だけ利用者へ情報を表示したい場合に便利で、シンプルなコードで導入できるため初心者でも仕組みを理解しながら利用できます。
お知らせやキャンペーン情報、更新通知、利用開始時の案内などを表示したいお問い合わせ画面、管理画面、ECサイト、会員サイトなどで活用できます。一定時間が経過すると自動的に閉じるため、利用者が閉じるボタンを押す必要がなく、そのままページの操作へ移ることができます。必要な情報だけを短時間表示したい場面にも適しています。
モーダル内のタイトルや本文はHTMLから自由に変更でき、CSSでは背景色、横幅、余白、角丸、影、文字サイズなどのデザインを調整できます。JavaScriptでは自動で閉じるまでの待機時間を変更できるため、表示時間を用途に合わせて設定できます。また、レスポンシブ対応のレイアウトを採用しているので、スマートフォン・タブレット・PCでも利用しやすいモーダルウインドウのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルはページ表示時に開き、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-close_wrap">
<!-- タイトル -->
<h1 class="modal-window-auto-close_title">
指定時間後に自動で閉じるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-auto-close_text">
モーダルはページ表示時に開き、3秒後に自動で閉じます。
</p>
</main>
<!-- モーダル背景 -->
<div
class="modal-window-auto-close_overlay"
data-auto-close-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-auto-close_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-window-auto-close-title">
<!-- モーダルタイトル -->
<h2
class="modal-window-auto-close_modal-title"
id="modal-window-auto-close-title">
お知らせ
</h2>
<!-- モーダル本文 -->
<p class="modal-window-auto-close_modal-text">
このモーダルは3秒後に自動で閉じます。
</p>
</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はページ内容、モーダル背景、モーダル本体のデザインを設定するファイルです。ページ内容の横幅や余白、モーダル背景の色、モーダル本体の横幅、内側余白、角丸、背景色、影、文字サイズなどを変更できます。is-hiddenクラスが追加されると、display:none;によってモーダル背景とモーダル本体が非表示になります。
script.jsはモーダルウインドウを指定時間後に自動で閉じる処理を行うファイルです。setTimeoutを使用し、ページを開いてから3秒が経過するとモーダル背景へis-hiddenクラスを追加します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くとモーダルウインドウが画面中央に表示され、3秒が経過すると自動で非表示になります。
カスタマイズできる内容
index.htmlではページ側のタイトルと説明文、モーダルウインドウ内のタイトルと本文を変更できます。用途に合わせて、お知らせなど表示したい内容へ書き換えられます。
style.cssではページ内容の最大横幅、余白、枠線、角丸、背景色、モーダル背景の色、モーダル本体の最大横幅、内側余白、角丸、背景色、影などを変更できます。また、タイトルの文字サイズや本文の文字色、行間も調整できます。
script.jsではsetTimeoutに指定している数値を変更することで、モーダルウインドウが自動で閉じるまでの時間を調整できます。
数値調整
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で利用できます。
コメント