modaalで背景のオーバーレイ部分をぼかす

javascript
この記事は約2分で読めます。
スポンサーリンク

colorbox版はこちら


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

$('.modal').modaal({
  before_open: function(){$("footer").prevAll().css({"filter":"blur(5px)"});$("footer").css({"filter":"blur(5px)"});},
  before_close: function(){$("footer").prevAll().css({"filter":"blur(0)"});$("footer").css({"filter":"blur(0)"});}
});

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

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

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

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

コメント

  1. […] modaal版はこちら […]

タイトルとURLをコピーしました