閉じるボタンで閉じられるポップオーバーの作り方
閉じるボタンで閉じられるポップオーバーを作る方法を紹介します。このサンプルでは、「ポップオーバーを表示」ボタンをクリックするとボタンの下に補足情報が表示され、ポップオーバー内に配置した「閉じる」ボタンをクリックすると非表示になります。表示と終了の操作が明確なため、利用者が自分のタイミングで内容を確認して閉じられます。
管理画面の操作説明、会員サイトの補足案内、ECサイトの商品情報、お問い合わせ画面の入力ヒントなど、必要な情報を一時的に表示したい場面に適しています。ポップオーバーは元の画面を大きく隠さずに情報を追加でき、閉じるボタンを設けることで操作方法も分かりやすくなります。
タイトル、説明文、表示ボタン、ポップオーバー内の文章、閉じるボタンの文字は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>
<!-- ポップオーバー全体 -->
<div class="close-button-popover_wrap">
<!-- タイトル -->
<div class="close-button-popover_title">
閉じるボタンで閉じるポップオーバー
</div>
<!-- 説明文 -->
<p class="close-button-popover_text">
ボタンをクリックするとポップオーバーが表示されます。
</p>
<!-- ボタンとポップオーバー -->
<div class="close-button-popover_area">
<!-- 表示ボタン -->
<button
class="close-button-popover_button"
id="close-button-popover-button"
type="button">
ポップオーバーを表示
</button>
<!-- ポップオーバー -->
<div
class="close-button-popover_popup"
id="close-button-popover-popup">
<!-- 見出し -->
<div class="close-button-popover_heading">
お知らせ
</div>
<!-- 本文 -->
<p class="close-button-popover_message">
閉じるボタンをクリックすると、このポップオーバーを閉じられます。
</p>
<!-- 閉じるボタン -->
<button
class="close-button-popover_close"
id="close-button-popover-close"
type="button">
閉じる
</button>
</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はポップオーバーの表示・非表示を切り替えるファイルです。表示ボタンをクリックするとshowクラスを追加し、閉じるボタンをクリックするとshowクラスを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
「ポップオーバーを表示」をクリックすると、ボタンの下にポップオーバーが表示されます。内容を確認したあと、ポップオーバー下部の「閉じる」ボタンをクリックすると非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタン、ポップオーバー内の見出し、本文、閉じるボタンの文字を変更できます。
style.cssでは全体の最大横幅、外側余白、内側余白、背景色、枠線、角丸、ボタンの色とサイズ、ポップオーバーの横幅、表示位置、影、吹き出し部分のサイズなどを変更できます。
script.jsでは表示ボタンと閉じるボタンに対応する要素や、showクラスを利用した表示・非表示処理を編集できます。
数値調整
style.css
max-width:700px;
ポップオーバーを配置する全体部分の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto 220px;
全体の外側余白です。上側の40pxを変更すると上の間隔が変わり、下側の220pxを変更するとポップオーバーを表示するために確保する領域が変わります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
top:calc(100% + 18px);
表示ボタンとポップオーバーの上下間隔です。18pxを大きくするとボタンから離れ、小さくすると近づきます。
width:300px;
ポップオーバーの横幅です。値を大きくすると広く、小さくするとコンパクトになります。
padding:18px;
ポップオーバー内部の余白です。値を大きくすると文章やボタンと枠線の間隔が広がります。
margin:0 0 18px;
本文と閉じるボタンの間隔です。18pxを大きくすると間隔が広がり、小さくすると近づきます。
width:100%;
閉じるボタンをポップオーバーの横幅いっぱいに表示する設定です。
padding:12px;
閉じるボタンの内側余白です。値を大きくするとボタンが高くなり、小さくすると低くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxによって全体の最大横幅を制限し、画面幅640px以下では@media(max-width:640px)を使用して内側余白を24px 18px、ポップオーバーの横幅を260pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント