指定時間後にポップアップを表示する方法
指定時間後にポップアップを表示する方法を紹介します。このサンプルでは、JavaScriptのsetTimeoutを使用して、ページを表示してから3秒後に画面中央へポップアップを自動表示します。ページを開いた直後ではなく一定時間が経過してから表示できるため、ページを閲覧しているユーザーへタイミングをずらしてお知らせを見せたい場合に利用できます。
ポップアップが表示されると画面全体に半透明の背景が重なり、中央に「お知らせ」のメッセージが表示されます。「閉じる」ボタンをクリックするとポップアップを非表示にできます。キャンペーンのお知らせ、重要な案内、会員サイトでの通知、ECサイトでの案内など、ページを一定時間閲覧したあとにユーザーへ情報を伝えたい場面に適しています。
HTMLではポップアップのタイトルや文章を変更でき、CSSではポップアップの横幅、余白、背景色、角丸、影、オーバーレイの色などを調整できます。JavaScriptでは待機時間の3000を変更することで、自動表示までの時間を設定できます。スマートフォンではポップアップが画面幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できる構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ表示から3秒後にポップアップを自動で表示します。
ページ表示から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="delayed-popup_wrap">
<!-- タイトル -->
<div class="delayed-popup_title">
3秒後に表示するポップアップ
</div>
<!-- 説明文 -->
<p class="delayed-popup_text">
ページ表示から3秒後にポップアップを自動で表示します。
</p>
</div>
<!-- ポップアップ表示時の背景 -->
<div class="delayed-popup_overlay">
<!-- ポップアップ本体 -->
<div
class="delayed-popup_box"
role="dialog"
aria-modal="true"
aria-labelledby="delayed-popup-box-title">
<!-- アイコン -->
<div class="delayed-popup_icon">
!
</div>
<!-- ポップアップタイトル -->
<div
class="delayed-popup_box-title"
id="delayed-popup-box-title">
お知らせ
</div>
<!-- ポップアップ本文 -->
<p class="delayed-popup_box-text">
ページを開いてから3秒後に自動表示されるポップアップです。
</p>
<!-- 閉じるボタン -->
<button
class="delayed-popup_close"
type="button">
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3つを使用し、3ファイルで構成されています。 HTMLで案内エリアとポップアップ本体を作成し、CSSでポップアップの表示位置・背景・サイズ・色・アニメーションなどを設定します。 JavaScriptでは、ページを開いてから3秒後にポップアップを自動表示し、「閉じる」ボタンをクリックすると非表示にします。 外部ライブラリやAPIは使用していないため、追加のサービス登録やAPIキーなどは必要ありません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、ページ上部の案内エリア、ポップアップ表示時の背景、ポップアップ本体、タイトル、本文、「閉じる」ボタンを記述しています。
「3秒後に表示するポップアップ」「お知らせ」などの表示内容を変更したい場合は、このファイルを編集します。
また、style.cssとscript.jsを読み込む役割もあります。
style.cssには、案内エリアとポップアップのデザインを記述しています。
横幅、余白、背景色、文字色、角丸、影、表示位置、フェードや移動のアニメーションなどを変更できます。
画面幅640px以下で適用されるレスポンシブ用のスタイルも、このファイルに記述しています。
script.jsには、ポップアップを表示・非表示にする処理を記述しています。
setTimeout()によってページ表示から3秒後にis-showクラスを追加し、「閉じる」ボタンをクリックするとクラスを削除してポップアップを閉じます。
設置方法・使い方
index.html、style.css、script.jsを同じsampleフォルダ内へ配置します。
index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルのファイル名を変更せず、そのまま同じ階層へ配置してください。
配置後にsample/index.htmlをブラウザで開くとサンプルを実行できます。
ページを開いた直後はポップアップが非表示になっており、3秒経過すると画面中央へ自動的に表示されます。
表示されたポップアップ内の「閉じる」ボタンをクリックすると非表示になります。
APIキー、URL、IDなどの利用者固有情報を設定する必要はありません。
表示するタイトルや文章を変更する場合はindex.html、表示までの待機時間を変更する場合はscript.jsを編集します。
カスタマイズできる内容
index.htmlでは、「3秒後に表示するポップアップ」「ページ表示から3秒後にポップアップを自動で表示します。」「お知らせ」などの文章や、ポップアップ本文、「閉じる」ボタンの文字を変更できます。
style.cssでは、案内エリアの最大横幅・余白・背景色・角丸、ポップアップ背景の暗さ、ポップアップ本体の横幅・余白・角丸・影、アイコンや文字、ボタンの色などを変更できます。
また、transitionやtransformを編集すると、ポップアップ表示時の動きも調整できます。
script.jsでは、setTimeout()に指定している数値を変更することで、ページを開いてからポップアップが表示されるまでの待機時間を変更できます。
数値調整
style.cssのmax-width:700px;は、案内エリアの最大横幅です。
値を大きくすると横に広がり、小さくすると狭くなります。
style.cssのwidth:420px;は、ポップアップ本体の横幅です。
値を大きくするとポップアップが広くなり、小さくすると狭くなります。
style.cssのpadding:28px;は、ポップアップ本体の内側余白です。
値を大きくすると内容と外周の間隔が広がります。
style.cssのborder-radius:16px;は、ポップアップ本体の角丸です。
値を大きくすると角がより丸くなります。
style.cssのtransition:.3s;は、ポップアップの表示状態や位置が切り替わる時間です。
値を大きくするとゆっくり変化し、小さくすると速く変化します。
style.cssのtransform:translateY(12px);は、表示前のポップアップを下方向へ移動させる距離です。
値を大きくすると、表示時の移動距離が大きくなります。
script.jsのsetTimeout(...,3000);にある3000は、ポップアップを表示するまでの待機時間をミリ秒で指定しています。
3000ミリ秒は3秒です。たとえば5000へ変更すると、ページを開いてから5秒後に表示されます。
レスポンシブ対応
このサンプルはレスポンシブ表示に対応しています。
style.cssでは、案内エリアにwidth:100%;とmax-width:700px;、ポップアップ本体にwidth:420px;とmax-width:100%;を指定し、小さい画面でも横幅を超えにくい構成にしています。
また、画面幅640px以下では@media (max-width:640px)が適用され、案内エリアのpaddingが24px 18px、ポップアップ本体のpaddingが24px 20pxへ変更されます。
そのため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント