背景を暗く表示するポップアップの作り方
背景を暗く表示するポップアップの作り方を紹介します。このサンプルでは、ページを開いたときにポップアップを表示し、その背後へ半透明の暗い背景を重ねることで、ポップアップの内容を目立たせます。JavaScriptで表示と非表示を切り替え、「閉じる」ボタンをクリックするとポップアップと暗い背景をまとめて非表示にできます。
お知らせや重要な案内、キャンペーン情報、利用時の注意事項など、ページを開いた利用者へ特定の内容を目立たせたい場面に利用できます。背景を暗くすることでページ本体とポップアップを視覚的に分けられるため、表示中の情報へ注目しやすくなります。お問い合わせ画面、会員サイト、ECサイト、管理画面などにも応用しやすい構成です。
HTMLではポップアップ内の見出し、文章、閉じるボタンを変更でき、CSSでは暗い背景の濃さ、ポップアップの横幅、余白、角丸、影、文字サイズなどを調整できます。画面幅が狭い場合にも収まるようレスポンシブ対応しているため、スマートフォン・タブレット・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-popup_wrap">
<!-- タイトル -->
<div class="dark-background-popup_title">
背景を暗く表示するポップアップ
</div>
<!-- 説明文 -->
<p class="dark-background-popup_text">
ページ読み込み時に、背景を暗くしてポップアップを表示します。
</p>
<!-- 再表示ボタン -->
<button class="dark-background-popup_reload" type="button">
もう一度表示する
</button>
<!-- 暗い背景とポップアップ -->
<div class="dark-background-popup_overlay" id="dark-background-popup">
<!-- ポップアップ本体 -->
<div class="dark-background-popup_box">
<!-- ポップアップタイトル -->
<div class="dark-background-popup_heading">
お知らせ
</div>
<!-- ポップアップ本文 -->
<p class="dark-background-popup_message">
背景を暗くして内容を目立たせる<br>
ポップアップです。
</p>
<!-- 閉じるボタン -->
<button class="dark-background-popup_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はポップアップと暗い背景のデザインを設定するファイルです。全体の横幅や高さ、ポップアップの最大横幅、余白、背景色、角丸、影、文字サイズなどを変更できます。background:rgba(15,23,42,.65);を使用して、ポップアップの背後を半透明の黒系カラーで暗く表示しています。
script.jsはポップアップの表示状態を切り替えるファイルです。「閉じる」ボタンをクリックするとdark-background-popup_hiddenクラスを追加し、暗い背景とポップアップを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。ページを開くと背景が暗くなり、その中央へ白いポップアップが表示されます。内容を確認したあと「閉じる」ボタンをクリックすると、暗い背景とポップアップが非表示になります。
カスタマイズできる内容
index.htmlでは、ページ内のタイトルや説明文、ポップアップタイトル、本文、「閉じる」ボタンの文字を変更できます。用途に合わせて、お知らせ、キャンペーン案内、注意事項、重要なメッセージなどの内容へ変更できます。
style.cssでは、表示エリアの横幅や高さ、ポップアップの大きさ、背景色、余白、角丸、影、文字サイズなどを変更できます。また、暗い背景に使用しているrgba()の色と透明度を調整すると、ポップアップ背後の暗さを変更できます。
数値調整
style.css
max-width:760px;
ポップアップを表示するエリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
min-height:620px;
表示エリアの最小高さです。値を大きくすると縦方向の表示領域が広がり、小さくすると低くなります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:40px;
表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:20px;
表示エリアとポップアップ本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:32px;
暗い背景の内側余白です。値を大きくすると画面端とポップアップ本体の間隔が広がります。
background:rgba(15,23,42,.65);
ポップアップ背後の暗い背景です。最後の.65が透明度を表します。0に近づけると透明になり、1に近づけるほど背景が濃くなります。
max-width:460px;
ポップアップ本体の最大横幅です。値を大きくすると横に広がり、小さくすると細くなります。
padding:40px 32px;
ポップアップ本体の内側余白です。40pxが上下、32pxが左右の余白です。値を大きくすると内容とポップアップの端との間隔が広がります。
box-shadow:0 20px 50px rgba(15,23,42,.28);
ポップアップ本体へ付ける影です。20pxを変更すると影の縦方向の位置が変わり、50pxを変更するとぼかしの広がりが変わります。
font-size:34px;
ポップアップタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
font-size:20px;
ポップアップ本文の文字サイズです。値を大きくすると文章が大きく表示されます。
padding:14px 40px;
「閉じる」ボタンの内側余白です。14pxが上下、40pxが左右の余白です。値を大きくするとボタンが大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは表示エリアにwidth:100%とmax-width:760px、ポップアップ本体にwidth:100%とmax-width:460pxを指定しているため、画面幅に合わせて横幅が縮小されます。
画面幅640px以下では表示エリアの最小高さを520pxへ変更し、内側余白を24px 18pxへ縮小します。暗い背景の余白やポップアップ本体の余白、タイトルと本文の文字サイズも小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント