背景を暗く表示するポップオーバーの作り方
背景を暗く表示するポップオーバーの作り方を紹介します。このサンプルでは、ボタンをクリックするとボタンの下にポップオーバーを表示し、同時に周囲の背景を半透明の黒色で覆います。背景を暗くすることで周囲のコンテンツを目立ちにくくし、表示されたポップオーバーの内容へ視線を集めやすくできます。
補足説明、操作案内、機能の詳細、注意事項など、ボタンに関連する情報を一時的に表示したい場面に利用できます。「ポップオーバーを表示」をクリックすると背景が暗くなり、ボタンの下へポップオーバーが表示されます。もう一度ボタンをクリックするとポップオーバーと暗い背景が非表示になります。
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="dark-background-popover_wrap">
<!-- タイトル -->
<div class="dark-background-popover_title">
背景を暗く表示するポップオーバー
</div>
<!-- 説明文 -->
<p class="dark-background-popover_text">
ボタンをクリックすると背景を暗くしてポップオーバーを表示します。
</p>
<!-- ポップオーバー配置エリア -->
<div class="dark-background-popover_area">
<!-- ポップオーバーを開閉するボタン -->
<button
class="dark-background-popover_button"
id="dark-background-popover-button"
type="button">
ポップオーバーを表示
</button>
<!-- ポップオーバー本体 -->
<div
class="dark-background-popover_popup"
id="dark-background-popover-popup">
背景を暗くして表示するポップオーバーです。補足情報や説明文を表示できます。
</div>
</div>
</div>
<!-- 背景を暗く表示するオーバーレイ -->
<div
class="dark-background-popover_overlay"
id="dark-background-popover-overlay">
</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はポップオーバー全体を構成するファイルです。タイトル、説明文、表示ボタン、ポップオーバー内の文章を変更できます。また、画面全体を暗くするオーバーレイもHTML内に配置しています。
style.cssはポップオーバーとオーバーレイのデザインを設定するファイルです。表示エリアの横幅や余白、ボタンの色、ポップオーバーの横幅、背景色、枠線、角丸、影、矢印のデザイン、オーバーレイの暗さなどを変更できます。
script.jsはポップオーバーの表示状態を切り替えるファイルです。「ポップオーバーを表示」ボタンをクリックすると、ポップオーバーと暗いオーバーレイへshowクラスを付け外しし、両方の表示・非表示を同時に切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」ボタンをクリックすると画面全体が暗くなり、ボタンの下へポップオーバーが表示されます。もう一度同じボタンをクリックすると、ポップオーバーと暗い背景が非表示になります。
カスタマイズできる内容
index.htmlでは「背景を暗く表示するポップオーバー」のタイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。補足説明や操作案内など、表示したい内容に合わせて文章を編集できます。
style.cssでは表示エリアやポップオーバーの横幅、余白、背景色、枠線、角丸、影、文字色などを変更できます。background:rgba(15,23,42,.65);の透明度を変更すると、ポップオーバー表示時の背景の暗さも調整できます。
数値調整
style.css
max-width:700px;
表示エリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto 150px;
表示エリアの外側余白です。40pxは上側、150pxは下側の余白を表します。値を大きくすると周囲との間隔が広がります。
padding:32px;
表示エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
padding:14px 28px;
表示ボタンの内側余白です。14pxは上下、28pxは左右の余白を表します。
border-radius:10px;
表示ボタンの角丸です。値を大きくするとボタンの丸みが強くなります。
top:calc(100% + 18px);
ボタンとポップオーバーの間隔です。18pxを大きくするとボタンから離れ、小さくすると近づきます。
width:300px;
ポップオーバーの横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
padding:18px;
ポップオーバー内部の余白です。値を大きくすると文章と枠線の間隔が広がります。
border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 30px rgba(15,23,42,.18);
ポップオーバーの影です。12pxは縦方向の位置、30pxはぼかしの大きさを表します。値を変更すると影の位置や広がりを調整できます。
background:rgba(15,23,42,.65);
ポップオーバー表示時に画面全体へ重ねる暗い背景です。.65を大きくすると背景がより濃くなり、小さくすると透明に近づきます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、表示エリアが画面幅に合わせて縮小します。また、画面幅640px以下では表示エリアの余白をpadding:24px 18px;へ変更し、ポップオーバーの横幅を260pxへ縮小しています。スマートフォン・タブレット・PCで利用できます。
コメント