box-shadowを使ったなんちゃってオーバーレイ

オーバーレイの通常の設置方法

webサイトでモーダルを使用する場合、併せて背景にオーバーレイを入れますよね。
オーバーレイの設置する方法は少々面倒です。
モーダルとは別に要素を用意し、Javascriptによって、毎日モーダルの出現と同時にオーバーレイがかかるスタイルを適用させるようにしなければいけません。

例えば以下のようになります。
※Javascriptの記述は省きます。

<!-- モーダル部分 -->
<div class="modal">
　　　　・
　　　　・
　　　　・
</div>

<!-- オーバーレイ部分 -->
<div class="overlay">
</div>

<style>
.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
.overlay.active {
    display: block;
}
</style>

モーダルを開くと同時に、javascriptによってactiveというclassがオーバーレイに付与される場合の例です。

結構大掛かりで面倒ですよね。
これをbox-shadowを使うことで似せて表現する方法があるのです。

なんちゃってオーバーレイ

box-shadowは、要素に対してシャドウを付けることができる属性ですが、シャドウの範囲を広げることでオーバーレイしてるように見せることもできます。

やり方としては、モーダルに対して以下のスタイルを当てればいいのです。

<style>
.modal {
    box-shadow: 0 0 10px 3000px rgba(0, 0, 0, 0.5);
}
</style>

簡単に説明すると、要素の周囲3000pxに対して透過率0.5の黒色をあてています。
3つ目の10pxはぼかし距離というもので、シャドウの端のぼかし方について調節しています。

3000pxも10pxもそれぞれご自身の好みの長さで調整してもらっても全然問題ないですが、見た目としてはまさしくオーバーレイになります。

なんちゃってオーバーレイの欠点

上記のやり方では一見オーバーレイにしか見えないのですが、欠点もあります。

それは、モーダルを閉じる時の動作に関することです。
通常モーダルは、モーダル範囲外のオーバーレイ部分をクリックすればモーダルが閉じられます。
原理としては、オーバーレイを適用している要素にJavascriptでクリックイベントを設定しているのです。

ところがなんちゃってオーバーレイでは、要素で全体を覆っていないために、クリックイベントを設定できません。(Javascriptで頑張ればできると思いますが、結構複雑になると思います。)

また、要素で全体を覆っていないことと関係しますが、モーダル範囲外の要素について普通にクリックなどできてしまいます。

こういう制約がある上でも、時間をかけずにオーバーレイを設置することを優先したい場合はどうぞ参考にしてください。

スラスラわかるHTML&CSSのきほん 第2版

HTML&CSSとWebデザインが 1冊できちんと身につく本

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)