指定時間後に自動で閉じるポップアップを作る方法
指定時間後に自動で閉じるポップアップを作る方法を紹介します。このサンプルでは、ポップアップを表示したあと、一定時間が経過すると自動で閉じる動作を実装しています。ユーザーが閉じるボタンを押さなくても自動的に非表示になるため、お知らせやキャンペーン情報などを短時間だけ表示したい場面に適しています。
初回アクセス時のお知らせや期間限定の案内、注意事項の表示など、画面を長時間占有したくないケースで活用できます。一定時間後に自動で閉じるため、ユーザーの操作を妨げにくく、スマートフォン・タブレット・PCでも快適に利用できます。
ポップアップ内のタイトルや文章は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="auto-close-popup_wrap">
<!-- ポップアップ本体 -->
<div class="auto-close-popup_box is-show" id="auto-close-popup-box">
<!-- アイコン -->
<div class="auto-close-popup_icon">
!
</div>
<!-- タイトル -->
<h1 class="auto-close-popup_title">
お知らせ
</h1>
<!-- 説明文 -->
<p class="auto-close-popup_text">
指定時間が経過すると自動で閉じるポップアップです。<br>
お知らせやキャンペーン情報などを一定時間だけ表示できます。
</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではページを開いたときに表示するポップアップ本体を作成し、CSSではポップアップの横幅、余白、背景色、枠線、角丸、影、表示・非表示の状態などを設定します。JavaScriptではsetTimeoutを使用し、ページを開いてから指定時間が経過するとポップアップから表示用のクラスを削除して自動で閉じます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップアップの内容を構成するファイルです。「!」のアイコン、「お知らせ」のタイトル、説明文を変更できます。ポップアップ本体には最初からis-showクラスが付いているため、ページを開いた時点では表示された状態になります。
style.cssはページ全体とポップアップのデザインを設定するファイルです。ポップアップの横幅、内側余白、枠線、角丸、背景色、影、アイコンのサイズや色、タイトルの文字サイズ、説明文の文字色や行間を変更できます。また、opacityとvisibilityで非表示状態を設定し、is-showクラスが付いている場合に表示される構成です。
script.jsはポップアップを指定時間後に自動で閉じる処理を行うファイルです。setTimeoutで待機時間を設定し、指定時間が経過するとis-showクラスを削除してポップアップを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くとポップアップが表示され、3秒が経過すると自動で非表示になります。
カスタマイズできる内容
index.htmlではポップアップ内のアイコン、タイトル、説明文を変更できます。表示したい内容に合わせて、お知らせやキャンペーン情報などの文章へ書き換えられます。
style.cssではポップアップの横幅、余白、枠線、角丸、背景色、影を変更できます。アイコンについても横幅、高さ、背景色、文字色、文字サイズを変更できます。また、タイトルの文字サイズや余白、説明文の文字色や行間、ポップアップが非表示へ切り替わる速度も調整できます。
script.jsでは、ポップアップが表示されてから自動で閉じるまでの時間を変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
width:360px;
ポップアップの横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
ポップアップの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:16px;
ポップアップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 10px 30px rgba(0,0,0,.08);
ポップアップの影です。10pxは縦方向の位置、30pxはぼかしの大きさです。値を変更すると影の位置や広がりを調整できます。
transition:.3s;
ポップアップの表示・非表示が切り替わる時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
width:64px;・height:64px;
アイコンの横幅と高さです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。
margin:0 auto 20px;
アイコンの下側余白です。20pxを大きくするとタイトルとの間隔が広がり、小さくすると狭くなります。
font-size:28px;
アイコン内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
font-size:22px;
ポップアップタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
script.js
3000
ポップアップを表示しておく時間です。3000は3秒を表します。5000に変更すると5秒後、1000に変更すると1秒後にポップアップが自動で非表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではポップアップ本体にwidth:360px;とmax-width:100%;を指定しているため、表示できる横幅が360pxより小さい場合は画面幅に合わせて縮小されます。また、box-sizing:border-box;によって内側余白と枠線を横幅へ含めて計算するため、スマートフォン・タブレット・PCで利用できます。
コメント