colorboxで背景をぼかす

javascript

2020.02.23

この記事は約2分で読めます。

モーダルウィンドウを簡単に作れるjQuery用プラグイン『colorbox』、背景の黒い部分をぼかしたいときにどうぞ（オーバーレイ部分にブラー効果付与）

$('.modal').colorbox({
     onOpen: function(){$("footer").prevAll().css({"filter":"blur(7px)"});$("footer").css({"filter":"blur(7px)"});},
     onCleanup: function(){$("footer").prevAll().css({"filter":"blur(0)"});$("footer").css({"filter":"blur(0)"});}
});

まぁ結構力技ではあるんですが、onOpenオプションを使ってモーダルウィンドウを開く前に、footerタグ以前の要素をまとめてcssのfilter:blurを使ってぼかしちゃうというものです。
＊モーダルウィンドウ用のタグはソースの一番最後に出力されるので、（</body>直前？）その手前までのタグを指定します。footerタグ使ってない人は↑の”footer”部分を適宜最後のタグに置き換えてください

もっとスマートな方法はあると思いますが、とりあえず動きます。

最後にonCleanupオプション（モーダルウィンドウを閉じる時作動）でブラー効果を解除しておくのを忘れずに

セレクタやブラーの値は自分の環境やお好みで変更してください。