ぼかしながら開閉するモーダルウインドウの作り方
ぼかしながら開閉するモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」をクリックすると、ぼやけた状態のモーダルが徐々にはっきりしながら画面中央に表示されます。「閉じる」をクリックすると反対にモーダルが徐々にぼやけながら透明になり、最後に非表示になります。CSSのfilterとopacityを組み合わせることで、通常のフェードとは異なる開閉アニメーションを実装します。
基本のモーダルウインドウと同じ構造やデザインを使用し、開閉時のぼかしアニメーションだけを追加しています。背景を暗くするオーバーレイや背景そのものをぼかす処理、外側クリック、×ボタンなどは追加していません。モーダル本体だけがぼやけた状態から鮮明になるため、お知らせ、確認画面、キャンペーン案内などを柔らかい印象で表示したい場合に利用できます。
HTMLではモーダルのタイトルや本文を変更でき、CSSではモーダルの横幅、余白、角丸、影に加えて、ぼかしの強さやアニメーション時間を調整できます。JavaScriptでは開くボタンと閉じるボタンをクリックしたときに表示状態を管理するクラスを切り替えます。640px以下では表示エリアとモーダルの内側余白を小さくするため、スマートフォン・タブレット・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="modal-open-close-blur_wrap">
<!-- タイトル -->
<div class="modal-open-close-blur_title">
ぼかし開閉モーダル
</div>
<!-- 説明文 -->
<p class="modal-open-close-blur_text">
モーダルを開くとぼやけた状態から徐々にはっきり表示され、閉じると再びぼやけながら消えていきます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-open-close-blur_open"
type="button"
data-modal-open-close-blur-open="">
モーダルを開く
</button>
</div>
<!-- モーダルウインドウ -->
<div
class="modal-open-close-blur_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-open-close-blur-title"
data-modal-open-close-blur-modal="">
<!-- モーダルタイトル -->
<div
class="modal-open-close-blur_modal-title"
id="modal-open-close-blur-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-open-close-blur_modal-text">
ぼかしながら開閉するアニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-open-close-blur_close"
type="button"
data-modal-open-close-blur-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。基本のモーダルウインドウと同じ構造や開閉方法を使用し、モーダル本体へCSSのfilterによるぼかしとopacityによる透明度の変化を追加しています。背景をぼかすのではなく、モーダルウインドウそのものがぼやけた状態から鮮明になり、閉じると再びぼやけながら消える構成です。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「モーダルを開く」ボタン、モーダルのタイトル・本文、「閉じる」ボタンを配置しています。index.htmlからstyle.cssとscript.jsを読み込んで使用します。
style.cssは表示エリア、ボタン、モーダルウインドウのデザインとぼかしアニメーションを設定するファイルです。初期状態ではopacity:0;とfilter:blur(20px);を指定し、is-activeクラスが追加されるとopacity:1;とfilter:blur(0);へ変化します。これによって、ぼやけた状態から徐々に鮮明になる表示と、鮮明な状態から徐々にぼやける非表示を表現します。
script.jsはモーダルの表示状態を切り替えるファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加し、「閉じる」をクリックすると同じクラスを削除します。JavaScriptではぼかしそのものを処理せず、CSSで設定したアニメーションをクラスの追加・削除によって切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」をクリックすると、ぼやけたモーダルが徐々に鮮明になりながら画面中央へ表示されます。「閉じる」をクリックすると、モーダルが徐々にぼやけながら透明になり、非表示になります。
カスタマイズできる内容
index.htmlでは表示エリアのタイトル・説明文、モーダルのタイトル・本文、開くボタンと閉じるボタンの文字を変更できます。style.cssでは表示エリアやモーダルの横幅、余白、角丸、影、ボタンのデザインを変更できます。また、filter:blur()の値を変更するとぼかしの強さを調整でき、transitionの時間を変更すると開閉アニメーションの速度を調整できます。
数値調整
style.css
max-width:700px;
表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
表示エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
表示エリアの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
表示エリアとモーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
表示エリアとモーダルのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
width:calc(100% - 40px);
モーダルウインドウの横幅です。40pxを大きくすると画面左右の余白が広がり、モーダルの横幅は狭くなります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルウインドウの影です。20pxを大きくすると影が下方向へ移動し、40pxを大きくすると影のぼかしが広がります。
opacity:0;・opacity:1;
モーダルの透明度です。0で完全に透明になり、1で完全に表示されます。ぼかしの変化と同時に透明度を変えることで自然な開閉を表現しています。
filter:blur(20px);
非表示時のぼかしの強さです。20pxを大きくするとモーダルが強くぼやけ、小さくするとぼかしが弱くなります。blur(0)になるとぼかしがなくなり、通常の鮮明な表示になります。
transition:opacity .5s ease, filter .5s ease, visibility .5s ease;
開閉アニメーションの時間です。.5sは0.5秒を表します。値を大きくするとゆっくりぼかしが変化し、小さくすると素早く変化します。
padding:10px 20px;
「閉じる」ボタンの内側余白です。上下の10pxを大きくするとボタンが高くなり、左右の20pxを大きくすると横に広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって表示エリアが画面幅に合わせて縮小されます。モーダルはwidth:calc(100% - 40px)とmax-width:420pxによって画面幅に合わせて調整されます。また、640px以下では表示エリアとモーダルのpaddingを24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント