jQuery leanModalを使ってみる

ボタンを押すと新しいウィンドウが出てきて、他の操作ができなくなるやつ。
モーダルダイアログというらしい。だからModalか。
今回はその中でも基本的な機能のみのleanModalを使う。

/*---------------------------------------------------------------------------*/

leanModalをダウンロードする

サイトからjsファイルをダウンロード。cssはセットになっていないので自分で作る。

ダウンロードしたのと同じサイトにサンプルがあるからそのままコピペでも十分。

leanModalを使う

以下のサイトがわかりやすく説明してくれてる。

・シンプルにモーダルウィンドウを実装できる「leanModal」

表示するために追加する要素はきちんとdisplay:noneしてあげよう。

でないと一度実行されるまで堂々と画面に存在してくれちゃう。

/*---------------------------------------------------------------------------*/

基本的な機能のみというものの、これだけで十分な気もする。

closeButtonを指定してあげれば、閉じる用のボタンも作れる。

なにより基本機能しかないということは、カスタマイズ性が高いということ。

自分がほしい機能によっては既存のものを探すより、leanModalをもとにして自分で

作ったほうが早いかもしれない。