一定時間操作がないと表示されるモーダルウインドウの作り方
一定時間操作がないと表示されるモーダルウインドウの作り方を紹介します。ユーザーがしばらくページを操作していない場合に、お知らせやキャンペーン情報、アンケート案内などを表示したい場面で利用できるサンプルです。本記事では、HTML・CSS・JavaScriptだけを使い、一定時間マウスやキーボードなどの操作がない場合にモーダルウインドウを自動表示する方法を実装します。
サンプルコードでは、ページを開いたあとにマウス移動やクリック、キー入力、スクロールなどの操作が一定時間行われなかった場合だけモーダルウインドウが表示されます。途中でユーザーが操作するとタイマーはリセットされるため、実際に操作しているユーザーの邪魔になりにくい動作になっています。待機時間はJavaScriptの数値を変更するだけで簡単に調整できます。
お問い合わせページやECサイト、会員サイト、管理画面などで、離脱防止のお知らせやクーポン配布、サポート案内を表示したい場合に活用できます。モーダル内のタイトルや本文はHTML、デザインはCSS、待機時間や表示条件はJavaScriptから変更できるため、用途に合わせてカスタマイズしやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
このデモでは、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-idle-time_wrap">
<!-- タイトル -->
<h1 class="modal-window-idle-time_title">
一定時間操作がないと表示されるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-idle-time_text">
一定時間操作がない場合にモーダルウインドウを自動表示します。
</p>
</div>
<!-- モーダル背景 -->
<div
class="modal-window-idle-time_overlay"
data-idle-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-idle-time_modal"
role="dialog"
aria-modal="true"
aria-labelledby="idle-modal-title">
<!-- モーダルタイトル -->
<h2
id="idle-modal-title"
class="modal-window-idle-time_modal-title">
一定時間操作がありません
</h2>
<!-- モーダル本文 -->
<p class="modal-window-idle-time_modal-text">
このモーダルは一定時間ユーザー操作がない場合に自動表示されます。
</p>
<!-- 閉じるボタン -->
<button
class="modal-window-idle-time_close"
type="button"
data-idle-close>
閉じる
</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では、操作として監視するイベントを追加・削除できます。
・script.jsでは、表示する条件やモーダルを開く処理を自由に変更できます。
数値調整
・script.jsの「3000」は3秒を表します。値を大きくするとモーダルが表示されるまでの待機時間が長くなり、小さくすると短くなります。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・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でもレイアウトが崩れにくい構成になっています。
コメント