外側クリックで閉じるポップアップを作る方法
外側クリックで閉じるポップアップを作る方法を紹介します。このサンプルでは、ページを開いた時点でポップアップを表示し、白いポップアップ本体の外側にある半透明の背景をクリックすると閉じる仕組みをHTML・CSS・JavaScriptで実装します。デモでは一度閉じたあとも動作を確認できるように「もう一度表示する」ボタンを用意しているため、外側クリックによる閉じる動作を繰り返し試せます。
お知らせ、キャンペーン情報、注意事項、サービス案内など、ページを開いた利用者へ情報を表示したい場面で活用できます。ポップアップ内をクリックしたときには閉じず、周囲の背景をクリックしたときだけ閉じるため、文章を読んだり内容を確認したりしている途中で意図せず非表示になることを防げます。
ポップアップ内の見出しやメッセージはHTMLから変更でき、CSSでは横幅、背景色、余白、角丸、影、文字サイズなどを調整できます。JavaScriptではクリックされた要素が半透明の背景そのものかを判定して閉じるシンプルな処理を使用しています。画面幅に合わせてポップアップが縮小するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ読み込み時に表示されるポップアップを再現したデモです。
ページ読み込み時の表示を再現しています。白いポップアップの外側をクリックすると閉じ、「もう一度表示する」を押すと再び表示されます。
コードをコピーして使おう！
<!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>
<!-- ページ内容 -->
<main class="outside-click-popup_wrap">
<!-- ページタイトル -->
<div class="outside-click-popup_title">
外側クリックで閉じるポップアップ
</div>
<!-- 説明文 -->
<p class="outside-click-popup_text">
ページ読み込み時にポップアップが表示されます。
</p>
<!-- ポップアップ全体 -->
<div
class="outside-click-popup_overlay"
id="outside-click-popup"
role="dialog"
aria-modal="true"
aria-labelledby="outside-click-popup-heading">
<!-- ポップアップ本体 -->
<div class="outside-click-popup_box">
<!-- ポップアップのタイトル -->
<div
class="outside-click-popup_heading"
id="outside-click-popup-heading">
お知らせ
</div>
<!-- ポップアップのメッセージ -->
<p class="outside-click-popup_message">
ポップアップの外側を<br>
クリックすると閉じます。
</p>
</div>
</div>
</main>
<!-- 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をブラウザで開いてください。ページを開くとポップアップが表示され、ポップアップの外側にある半透明の背景をクリックすると閉じます。
カスタマイズできる内容
index.htmlではページタイトル、説明文、ポップアップ内の見出しやメッセージを変更できます。用途に合わせて、お知らせ、キャンペーン情報、注意事項などの内容へ変更できます。
style.cssでは全体の横幅、背景色、余白、角丸、影、文字サイズ、ポップアップの大きさなどを変更できます。サイトデザインに合わせて自由に調整できます。
script.jsでは外側クリック時に実行する処理を変更できます。
数値調整
style.css
max-width:760px;
ページ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
min-height:620px;
ページ全体の最小高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
padding:40px;
ページ全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:20px;
全体やポップアップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:460px;
ポップアップ本体の最大横幅です。値を大きくするとポップアップが横に広がり、小さくするとコンパクトになります。
padding:48px 32px 40px;
ポップアップ本体の内側余白です。値を大きくすると文字との余白が広がり、小さくすると詰まった表示になります。
font-size:34px;
ポップアップタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
font-size:20px;
メッセージの文字サイズです。値を大きくすると読みやすくなり、小さくするとコンパクトになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより画面幅に応じてレイアウトが縮小されます。また、640px以下では余白や文字サイズを調整するmedia queryを実装しているため、スマートフォン・タブレット・PCで利用できます。
コメント