JQuery Tips BlockUIプラグイン

情報が多くない場合は遷移せずに
一画面で登録・更新・削除・一覧までやりたい。

showModalDialogで新しい画面をあげると
そのたびにリクエストが発生するのであまり好まない。

その場合は、jquery.blockUI.v2.jsを使うと便利。
divを使って、ポップアップのモーダル風の画面が簡単にできる。

addFormというidを持つdivをモーダルにしたい場合以下
高さ100px 幅350pxのモーダル画面を表示する。

左右の中央に持って来れなかったので、今回限りでソースに手を入れた。
(時間があればちゃんとソースを解析しないといけないが)

・84行目くらいからから始まる、cssのデフォルト設定より、プロパティ「left:’35%’,」を削除
・224行目くらいから始まるスタイルの指定のmargin:0 を margin: 0 autoに変更、left:0; を 削除
・blockUIのdivが最後のdivの次に追加されるようでposition指定を
 relative(デフォルトはfixed)にする。
 するとその下に配置されるのでネガティブマージンで適切な値を入れる。

$.blockUI({
message: $(‘#addForm’),
css: {
position: ‘relative’,
top: ‘-450px’,
margin: ‘0 auto’,
height: ‘100px’,
z:’1005′,
padding:’50px’,
width:’350px’,
backgroundColor:’#cfedad’,
}
});

■初期化は以下のようにも出来る(今回は使用していない)
$.blockUI.defaults.css = {
top: ’10px’,
width: ‘500px’,
height: ‘550px’,
z: ‘1005’,
padding: ’10px’,
backgroundColor:’#cfedad’,
color:’#333′
}

コメントを残す

メールアドレスが公開されることはありません。