×ボタンで閉じるポップアップを作る方法
×ボタンで閉じるポップアップを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ページを開いたときに表示されているポップアップを右上の「×」ボタンで非表示にします。ポップアップでよく使われるシンプルな閉じる操作を実装し、×ボタンをクリックするとアニメーションを使用せず、そのままポップアップが閉じる仕組みです。
お知らせ、注意事項、キャンペーン情報、サービス案内などをポップアップで表示し、内容を確認した利用者がすぐに閉じられるようにしたい場面で利用できます。JavaScriptでは×ボタンのクリックを検知し、ポップアップへ非表示用のクラスを追加します。文字付きの「閉じる」ボタンではなく、ポップアップ右上に×ボタンを配置するため、内容を表示する領域を広く確保しながら閉じる操作を用意できます。
HTMLではポップアップの見出しやメッセージを変更でき、CSSでは横幅、余白、背景色、角丸、文字サイズ、影、×ボタンの大きさや位置などを調整できます。JavaScriptは×ボタンによる非表示処理だけなので構成も分かりやすく、初心者でも導入しやすいサンプルです。640px以下ではポップアップの余白や文字サイズを小さくしているため、スマートフォン・タブレット・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>
<!-- ポップアップ表示エリア -->
<div class="x-button-popup_wrap">
<!-- ポップアップ配置エリア -->
<div class="x-button-popup_popup">
<!-- ポップアップ本体 -->
<div class="x-button-popup_box" id="x-button-popup">
<!-- 閉じるボタン -->
<button
class="x-button-popup_close"
type="button"
aria-label="閉じる">
×
</button>
<!-- 見出し -->
<div class="x-button-popup_heading">
お知らせ
</div>
<!-- メッセージ -->
<p class="x-button-popup_message">
右上の「×」ボタンを押すと、<br>
ポップアップを閉じることができます。
</p>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでポップアップの見出し、メッセージ、右上の×ボタンを作成し、CSSでポップアップのサイズや配置、背景色、角丸、影、×ボタンの位置などを設定します。JavaScriptでは×ボタンのクリックを検知し、ポップアップを非表示にします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップアップ全体を構成するファイルです。「お知らせ」の見出し、メッセージ、右上に配置する×ボタンを設定しています。
style.cssはポップアップと×ボタンのデザインを設定するファイルです。表示エリアの大きさ、ポップアップの横幅、余白、背景色、文字サイズ、角丸、影、×ボタンの大きさや位置を変更できます。×ボタンを押したあとに追加されるx-button-popup_hideクラスでは、display:none;を使用してポップアップを非表示にします。
script.jsは×ボタンによる非表示処理を行うファイルです。×ボタンのクリックを検知すると、ポップアップへx-button-popup_hideクラスを追加します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。ページを開くとポップアップが表示され、右上の「×」ボタンをクリックすると非表示になります。
カスタマイズできる内容
index.htmlでは「お知らせ」の見出しとメッセージを変更できます。style.cssではポップアップの横幅、余白、背景色、角丸、影、文字サイズのほか、×ボタンの大きさ、位置、背景色、文字色を変更できます。script.jsでは×ボタンをクリックしたときにポップアップへ非表示用のクラスを追加しています。
数値調整
style.css
max-width:760px;
ポップアップ表示エリアの最大横幅です。値を大きくすると表示エリアが横に広がり、小さくすると狭くなります。
min-height:620px;
ポップアップ表示エリアの最小高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
max-width:460px;
ポップアップ本体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:48px 32px 40px;
ポップアップ本体の内側余白です。上側の48px、左右の32px、下側の40pxを変更すると、内容とポップアップ端との間隔を調整できます。
border-radius:20px;
ポップアップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 50px ...
ポップアップの影です。20pxを変更すると影の縦方向の位置が変わり、50pxを変更すると影のぼかし範囲が変わります。
top:16px;・right:16px;
×ボタンの位置です。topの値を大きくすると下方向へ移動し、rightの値を大きくすると左方向へ移動します。
width:40px;・height:40px;
×ボタンの大きさです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
font-size:26px;
×の文字サイズです。値を大きくすると×が大きくなり、小さくすると小さくなります。
font-size:34px;
見出しの文字サイズです。値を大きくすると見出しが大きくなり、小さくすると控えめになります。
font-size:20px;
メッセージの文字サイズです。値を大きくすると文章が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、画面幅に合わせて表示エリアが縮小されます。また、640px以下では表示エリアの最小高さを520px、ポップアップ周囲の余白を24px 18px、ポップアップ本体の余白を44px 24px 32pxへ変更し、見出しとメッセージの文字サイズも小さくしています。
コメント