jQueryでUIをブロックできるPlugin

jQueryでUIをブロックできるPluginを解説する。使ってみた感じは下図を参照して欲しい。

全体的に薄いグレーになっていて真ん中にメッセージが出ているのが見てとれると思うが、今回解説するPluginを使用するとそれが実現可能だ。使い方はいたって簡単。こちらからjquery.blockUI.jsをダウンロードして、下記のコードをペペッとscriptタグ内に貼り付ければ良いだけ。

jQuery(document).ready(function() {
 $.blockUI({
  title: 'Tips',
  message: 'メッセージだよー',
  css: { 
   padding:'20px'
  }
 });
 $('.blockOverlay').attr('title', 'クリックで解除').click($.unblockUI);
});

他にも多様な使い方があるのでデモページを参照して欲しい。