指定時間後に自動で閉じるモーダルウインドウの作り方
指定時間後に自動で閉じるモーダルウインドウの作り方を紹介します。一定時間だけメッセージやお知らせを表示し、その後は自動的に閉じたい場合に利用できるサンプルです。HTML・CSS・JavaScriptだけで実装でき、ページ表示時にモーダルを表示し、指定した時間が経過すると自動で閉じるシンプルな構成になっています。
サンプルコードでは、ページを開くとモーダルウインドウが自動表示され、JavaScriptで設定した時間が経過すると自動で閉じます。表示時間はコード内の数値を変更するだけで簡単に調整できるため、短い案内表示から長めのお知らせまで用途に合わせてカスタマイズできます。また、閉じるボタンも用意しているため、ユーザーが待たずにモーダルを閉じることもできます。
お問い合わせ画面やECサイト、会員サイト、管理画面などで、期間限定のお知らせや操作説明、利用案内などを一時的に表示したい場面に適しています。モーダル内のタイトルや本文はHTML、デザインはCSS、表示時間はJavaScriptから変更できるため、さまざまなWebサイトへ導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルはページ表示時に開き、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>
<!-- デモ全体 -->
<div class="modal-window-auto-close_wrap">
<!-- タイトル -->
<h1 class="modal-window-auto-close_title">
指定時間後に自動で閉じるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-auto-close_text">
モーダルはページ表示時に開き、指定時間後に自動で閉じます。
</p>
</div>
<!-- モーダル背景 -->
<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="auto-close-modal-title">
<!-- モーダルタイトル -->
<h2
id="auto-close-modal-title"
class="modal-window-auto-close_modal-title">
お知らせ
</h2>
<!-- モーダル本文 -->
<p class="modal-window-auto-close_modal-text">
このモーダルは3秒後に自動で閉じます。
</p>
<!-- 閉じるボタン -->
<button
class="modal-window-auto-close_close"
type="button"
data-auto-close-button>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでページ表示後に一定時間経過するとモーダルを自動で閉じる処理を実装しています。 モーダルはページ表示時に開いた状態から開始し、指定した時間が経過すると自動的に閉じるため、お知らせや案内画面などを一定時間だけ表示したい場合に利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：モーダルウインドウ本体・タイトル・説明文・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：画面レイアウト・背景色・文字サイズ・余白・角丸・ボタン・モーダルサイズ・背景オーバーレイなど、見た目全体を設定します。
・script.js：ページ表示後に指定時間待機し、自動でモーダルを閉じる処理と、閉じるボタンのクリック処理を実装します。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ ページを開くとモーダルウインドウが表示され、指定時間が経過すると自動で閉じます。
⑤ 待たずに閉じたい場合は「閉じる」ボタンをクリックします。
カスタマイズできる内容
・index.htmlでは、モーダルタイトル・本文・ボタンの文字などを変更できます。
・style.cssでは、モーダルの色・幅・高さ・余白・角丸・背景色・影などのデザインを自由に変更できます。
・script.jsでは、自動で閉じる時間や閉じる処理を変更できます。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
数値調整
・script.jsの「3000」は3秒を表します。値を大きくするとモーダルが閉じるまでの時間が長くなり、小さくすると短くなります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると背景の暗さを調整できます。
・style.cssの「border-radius:18px;」を変更するとモーダルの角丸を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。
コメント