背景をぼかして表示するポップオーバーの作り方【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>

  <!-- ポップオーバー全体 -->
  <div class="blur-background-popover_wrap">

    <!-- ぼかし対象 -->
    <div class="blur-background-popover_content" id="blur-background-popover-content">

      <!-- タイトル -->
      <div class="blur-background-popover_title">
        背景をぼかして表示するポップオーバー
      </div>

      <!-- 説明文 -->
      <p class="blur-background-popover_text">
        ボタンをクリックすると背景をぼかしてポップオーバーを表示します。
      </p>

    </div>

    <!-- ポップオーバー表示エリア -->
    <div class="blur-background-popover_area">

      <!-- 表示ボタン -->
      <button
        class="blur-background-popover_button"
        id="blur-background-popover-button"
        type="button">
        ポップオーバーを表示
      </button>

      <!-- ポップオーバー -->
      <div
        class="blur-background-popover_popup"
        id="blur-background-popover-popup">
        背景をぼかして表示するポップオーバーです。補足情報や説明文を表示できます。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本文字色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* ポップオーバー全体 */
.blur-background-popover_wrap{
  position:relative; /* ポップオーバー配置の基準 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅 */
  margin:40px auto 150px; /* 上40px・左右中央・下150px */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 内容を中央揃え */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* 背景ぼかし対象 */
.blur-background-popover_content{
  transition:filter .3s ease; /* 0.3秒でぼかしを切り替える */
}

/* ポップオーバー表示中の背景 */
.blur-background-popover_content.is-blur{
  filter:blur(6px); /* 背景を6pxぼかす */
}

/* タイトル */
.blur-background-popover_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.blur-background-popover_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 行間 */
}

/* ポップオーバー表示エリア */
.blur-background-popover_area{
  position:relative; /* ポップオーバーの配置基準 */
  display:inline-block; /* 内容幅で表示 */
  z-index:10; /* ぼかし対象より前面へ表示 */
}

/* 表示ボタン */
.blur-background-popover_button{
  padding:14px 28px; /* 上下14px・左右28px */
  border:none; /* 標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* 親要素と同じフォント */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* カーソルを指型にする */
}

/* ポップオーバー */
.blur-background-popover_popup{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 18px); /* ボタンの18px下へ配置 */
  left:50%; /* 横方向の中央を基準にする */
  width:300px; /* ポップオーバーの横幅 */
  padding:18px; /* 内側余白 */
  border:1px solid #dbe4f0; /* 枠線 */
  border-radius:12px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.12); /* 影 */
  color:#374151; /* 文字色 */
  line-height:1.8; /* 行間 */
  text-align:left; /* 文章を左揃え */
  transform:translateX(-50%); /* 中央位置へ調整 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* ポップオーバー上部の矢印 */
.blur-background-popover_popup::before{
  content:""; /* 疑似要素を生成 */
  position:absolute; /* ポップオーバーを基準に配置 */
  top:-8px; /* 上へ8px移動 */
  left:50%; /* 中央へ配置 */
  width:16px; /* 矢印の横幅 */
  height:16px; /* 矢印の高さ */
  border-top:1px solid #dbe4f0; /* 上側の枠線 */
  border-left:1px solid #dbe4f0; /* 左側の枠線 */
  background:#ffffff; /* 矢印の背景色 */
  transform:translateX(-50%) rotate(45deg); /* 45度回転して矢印にする */
}

/* ポップオーバー表示状態 */
.blur-background-popover_popup.show{
  display:block; /* ポップオーバーを表示 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ポップオーバー全体 */
  .blur-background-popover_wrap{
    margin-bottom:240px; /* ポップオーバー用の下側余白 */
    padding:24px 18px; /* スマートフォン用の内側余白 */
  }

  /* ポップオーバー */
  .blur-background-popover_popup{
    width:260px; /* スマートフォンでは横幅を縮小 */
  }

}

// ポップオーバーを表示するボタンを取得
const blurBackgroundPopoverButton=document.getElementById(
  "blur-background-popover-button"
);

// ポップオーバーを取得
const blurBackgroundPopoverPopup=document.getElementById(
  "blur-background-popover-popup"
);

// ぼかし対象を取得
const blurBackgroundPopoverContent=document.getElementById(
  "blur-background-popover-content"
);

// 表示ボタンをクリックした時
blurBackgroundPopoverButton.addEventListener("click",function(){

  // ポップオーバーの表示・非表示を切り替える
  blurBackgroundPopoverPopup.classList.toggle("show");

  // 背景のぼかしを切り替える
  blurBackgroundPopoverContent.classList.toggle("is-blur");

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではポップオーバーを表示するボタン、ポップオーバー本体、背景ぼかしの対象となる内容を作成します。CSSではポップオーバーの位置や横幅、背景色、枠線、角丸、影、背景のぼかし具合などを設定します。JavaScriptではボタンのクリックに合わせて、ポップオーバーの表示・非表示と背景のぼかし状態を同時に切り替えます。

sample/
    ├── index.html
    ├── style.css
    └── script.js

各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、「ポップオーバーを表示」ボタン、ポップオーバー内の文章を変更できます。また、背景をぼかす対象となる内容とポップオーバー表示エリアもHTML内で分けて配置しています。

style.cssは背景のぼかしとポップオーバーのデザインを設定するファイルです。表示エリアの横幅や余白、背景のぼかし具合、ボタンの色、ポップオーバーの横幅、背景色、枠線、角丸、影、矢印などを変更できます。

script.jsはポップオーバーの表示状態を切り替えるファイルです。「ポップオーバーを表示」ボタンをクリックすると、ポップオーバーへshowクラス、背景ぼかしの対象へis-blurクラスを付け外しし、表示状態とぼかし状態を同時に切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」ボタンをクリックすると背景がぼかされ、ボタンの下へポップオーバーが表示されます。もう一度同じボタンをクリックするとポップオーバーが閉じ、背景のぼかしも解除されます。

カスタマイズできる内容
index.htmlでは「背景をぼかして表示するポップオーバー」のタイトル、説明文、表示ボタンの文字、ポップオーバー内の文章を変更できます。補足説明や操作案内、機能の説明など、用途に合わせた内容へ書き換えられます。

style.cssでは表示エリアの最大横幅、余白、背景色、背景のぼかし具合、ボタンの色や角丸、ポップオーバーの横幅、内側余白、枠線、角丸、影、文字色などを変更できます。filter:blur(6px);を変更すると、ポップオーバー表示時の背景のぼかし具合を調整できます。

数値調整
style.css
max-width:700px;
ポップオーバー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto 150px;
ポップオーバー全体の外側余白です。40pxは上側、150pxは下側の余白です。値を大きくすると周囲との間隔が広がります。

padding:32px;
ポップオーバー全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
ポップオーバー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

transition:filter .3s ease;
背景のぼかしが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

filter:blur(6px);
ポップオーバー表示中の背景のぼかし具合です。6pxを大きくすると強くぼかされ、小さくするとぼかしが弱くなります。

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,.12);
ポップオーバーの影です。12pxは縦方向の位置、30pxは影のぼかし具合です。値を変更すると影の位置や広がりを調整できます。

width:16px;
ポップオーバー上部に表示する矢印の横幅です。値を大きくすると矢印が大きくなります。

height:16px;
ポップオーバー上部に表示する矢印の高さです。値を大きくすると矢印が大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、ポップオーバー全体が画面幅に合わせて縮小します。また、640px以下では全体の内側余白をpadding:24px 18px;へ変更し、ポップオーバーの横幅を260pxへ縮小しています。スマートフォン・タブレット・PCで利用できます。