グラデーション背景と半透明オーバーレイ付きモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

グラデーション背景と半透明オーバーレイ付きモーダルウインドウの作り方

グラデーション背景と半透明オーバーレイ付きモーダルウインドウの作り方を紹介します。ページ内の操作ボタンをクリックすると、背景を暗く透かしたオーバーレイの上へ、グラデーションを使ったモーダルウインドウを表示できるサンプルです。一般的な単色のモーダルよりも印象的なデザインに仕上げられます。

このサンプルはHTML・CSS・JavaScriptのみで動作します。モーダル本体には青から紫へ変化するグラデーション背景を使用し、背面には半透明のオーバーレイを表示します。右上の「×」ボタン、下部の「閉じる」ボタン、またはモーダル外の背景部分をクリックすると閉じられます。

キャンペーン案内、会員サイトの特典表示、ECサイトの商品紹介、管理画面のお知らせなど、通常より目立たせたい情報を表示する場面に利用できます。グラデーションの色、オーバーレイの濃さ、モーダルの横幅、角丸、影、表示する文章やボタン名はコード内で変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

グラデーションモーダル

「モーダルを開く」をクリックすると、半透明オーバーレイの上へグラデーション背景のモーダルを表示します。

「モーダルを開く」をクリックすると表示されます。「閉じる」「×」ボタン、または背景部分をクリックすると閉じます。

コードをコピーして使おう！

<!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="gradient-overlay-modal-window_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="gradient-overlay-modal-window_title">
      グラデーションモーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="gradient-overlay-modal-window_text">
      「モーダルを開く」をクリックすると、半透明オーバーレイの上へグラデーション背景のモーダルを表示します。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="gradient-overlay-modal-window_open"
      type="button"
      data-gradient-overlay-modal-window-open>
      モーダルを開く
    </button>

  </div>

  <!-- 半透明のモーダル背景 -->
  <div
    class="gradient-overlay-modal-window_overlay"
    data-gradient-overlay-modal-window-overlay>

    <!-- グラデーション背景のモーダル本体 -->
    <div
      class="gradient-overlay-modal-window_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="gradient-overlay-modal-window-title">

      <!-- モーダル右上の閉じるボタン -->
      <button
        class="gradient-overlay-modal-window_close"
        type="button"
        data-gradient-overlay-modal-window-close
        aria-label="閉じる">
        ×
      </button>

      <!-- モーダルタイトル -->
      <div
        class="gradient-overlay-modal-window_heading"
        id="gradient-overlay-modal-window-title">
        特別なお知らせ
      </div>

      <!-- モーダルの説明文 -->
      <p class="gradient-overlay-modal-window_message">
        グラデーション背景と半透明オーバーレイを使用したモーダルウインドウです。
      </p>

      <!-- モーダル下部の閉じるボタン -->
      <button
        class="gradient-overlay-modal-window_button"
        type="button"
        data-gradient-overlay-modal-window-button>
        閉じる
      </button>

    </div>

  </div>

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはグラデーション背景のモーダルウインドウと開閉ボタンの構造、CSSには半透明オーバーレイやグラデーション、角丸、影などのデザイン、JavaScriptにはモーダルの表示・非表示処理を記述しています。外部ライブラリを使用せず、3ファイルを同じフォルダへ配置するだけで動作します。

「モーダルを開く」をクリックすると、画面全体へ半透明のオーバーレイが表示され、その前面に青から紫へ変化するグラデーション背景のモーダルウインドウが表示されます。右上の「×」、下部の「閉じる」、またはモーダル外の背景部分をクリックすると閉じます。

キャンペーン案内、会員向けのお知らせ、ECサイトの特典紹介など、通常の白いモーダルより目立たせたい内容へ利用できます。表示する文章やボタン名だけでなく、グラデーションの色、オーバーレイの濃さ、モーダルの大きさなどもコード内で変更できます。 

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

各ファイルの役割
index.html
モーダルを開く操作エリア、半透明オーバーレイ、グラデーション背景のモーダル本体、右上と下部の閉じるボタンを管理します。タイトル、説明文、ボタン名を変更すると画面へ表示される内容が変わります。

style.css
操作エリア、オーバーレイ、モーダル本体、ボタン、文字、余白、角丸、影を管理します。モーダル本体と開くボタンのグラデーション、オーバーレイの透明度もこのファイルで設定しています。

script.js
モーダルを開く処理、右上と下部のボタンで閉じる処理、モーダル外の背景をクリックしたときに閉じる処理を管理します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置し、sample/index.htmlをブラウザで開きます。「モーダルを開く」をクリックすると、半透明オーバーレイとグラデーション背景のモーダルが表示されます。

モーダルを閉じる場合は、右上の「×」、下部の「閉じる」、またはモーダル本体の外側にある半透明部分をクリックします。

カスタマイズできる内容
index.htmlでは操作エリアのタイトル、説明文、モーダルタイトル、本文、各ボタン名を変更できます。style.cssではグラデーションの色、方向、オーバーレイの濃さ、モーダルの横幅、余白、角丸、影、文字色、ボタン色を変更できます。script.jsでは開閉処理に使用する対象要素や、閉じる操作を編集できます。

数値調整
style.cssのbackground:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);では、135degを変更するとグラデーションの方向が変わります。0%と100%を変更すると、それぞれの色が切り替わる位置が変わります。

background:rgba(15,23,42,.65);の.65を大きくするとオーバーレイが暗くなり、小さくすると背面が見えやすくなります。max-width:440px;を変更するとモーダルの最大横幅が変わります。padding:48px 30px 30px;を変更するとモーダル内部の上・左右・下の余白が変わります。border-radius:22px;を変更するとモーダルの角丸が変わります。

レスポンシブ対応
style.cssではモーダル本体にwidth:100%とmax-width:440pxを指定し、画面幅に合わせて縮小できるようにしています。オーバーレイにはpadding:20pxを指定しているため、小さい画面でもモーダルが画面端へ密着しません。

@media(max-width:640px)では、操作エリアをpadding:24px 18px、モーダル本体をpadding:48px 18px 20pxへ変更しています。スマートフォンでは左右の余白が狭くなり、タブレット・PCでは最大横幅を保った状態で画面中央へ表示されます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント