指定時間後に自動で閉じるポップオーバーの作り方
指定時間後に自動で閉じるポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックするとポップオーバーが表示され、一定時間が経過すると自動的に閉じる動作を実装します。ユーザーが閉じる操作をしなくても自動で非表示になるため、一時的なお知らせや補足情報の表示に便利です。
操作方法の案内や機能説明、ヒント表示、完了メッセージなど、短時間だけ表示したい情報に適しています。必要な情報だけを表示し、一定時間後に自動で閉じることで画面をすっきり保つことができます。スマートフォン・タブレット・PCのどの環境でも同じ操作で利用できます。
タイトル、説明文、ボタンの文字、ポップオーバー内の文章はHTMLから変更できます。CSSでは色やサイズ、余白、角丸、影などのデザインを自由に調整でき、JavaScriptでは自動で閉じるまでの時間を変更できます。用途に合わせて表示時間を調整しやすいシンプルなサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックするとポップオーバーが表示されます。
「ポップオーバーを表示」をクリックすると表示され、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="auto-close-popover_wrap">
<!-- タイトル -->
<div class="auto-close-popover_title">
指定時間後に自動で閉じるポップオーバー
</div>
<!-- 説明文 -->
<p class="auto-close-popover_text">
ボタンをクリックするとポップオーバーが表示されます。
</p>
<!-- ボタンとポップオーバー -->
<div class="auto-close-popover_area">
<button
class="auto-close-popover_button"
type="button"
id="auto-close-popover-button">
ポップオーバーを表示
</button>
<div
class="auto-close-popover_popup"
id="auto-close-popover-popup">
このポップオーバーは表示から3秒後に自動で閉じます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでポップオーバーのレイアウトを作成し、CSSでデザインや表示位置を設定、JavaScriptで表示処理と一定時間後に自動で閉じる処理を実装しています。外部ライブラリは使用していないため、そのままブラウザで動作を確認できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。
style.cssはデザインを設定するファイルです。全体のレイアウト、色、余白、角丸、影、ポップオーバーの表示位置やサイズなどを変更できます。
script.jsはボタンをクリックしたときの表示処理と、自動で閉じるタイマー処理を担当します。表示時間を変更する場合もこのファイルを編集します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じフォルダへ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」をクリックするとポップオーバーが表示され、3秒後に自動で閉じる動作を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。
style.cssでは全体の横幅、余白、背景色、ボタンやポップオーバーの色、角丸、影、表示位置、ポップオーバーの横幅などを自由に変更できます。
script.jsでは自動で閉じるまでの表示時間を変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると広く、小さくするとコンパクトになります。
margin:40px auto 220px;
下側220pxを変更するとポップオーバー表示時の余白が変わります。
padding:32px;
全体の内側余白です。値を変更すると見た目の余裕が変わります。
top:calc(100% + 18px);
ボタンからポップオーバーまでの表示位置です。18pxを変更すると上下の間隔が変わります。
width:300px;
ポップオーバーの横幅です。値を変更すると表示サイズが変わります。
border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなります。
script.js
const autoClosePopoverDelay = 3000;
3000は3秒を表します。値を大きくすると長く表示され、小さくすると短時間で自動的に閉じます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxで画面幅に応じたレイアウトになっており、640px以下では@media(max-width:640px)で余白やポップオーバーの横幅を調整しています。スマートフォン・タブレット・PCのいずれでも利用できます。
コメント