シンプルにモーダルウィンドウを実装できる「leanModal」
![](http://kwski.net/blog/wp-content/uploads/2013/02/787-604x270.jpg)
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモ
スクリプト
<script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript">
実装
<a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top: 50, // モーダルウィンドウの縦位置を指定 overlay : 0.5, // 背面の透明度 closeButton: ".modal_close" // 閉じるボタンのCSS classを指定 }); }); </script>
オプション
- top
表示するモーダルウィンドウの縦位置(CSSのtop)を指定します。 - overlay
jQuery fadeToの"opacity"の設定です。モーダルウィンドウを開いたときの背面の不透明度を指定します。(#lean_overlayのbackgroundに対する透明度になります。) * fadeToの"speed"はライブラリ内で200で設定されているので、0.2秒で背面が変化します。 - closeButton
閉じるボタンのCSSクラス名を指定します。必要なければオプションとスタイルを消去。個人的には、必要ないと思います。(大部分のユーザには「背面をクリックするとウィンドウが閉じられる」という認識は浸透していると思うので、わざわざカーソルを「閉じるボタン」まで移動して閉じるためのIFは必要ないと考えます。)
#lean_overlay{ position: fixed; z-index:100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none; } #div787{ background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); display: none; padding: 30px; width: 780px; } .modal_close{ position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../img/modal_close.png); z-index: 2; }
モーダルウィンドウの横位置
センタに表示されます。left 50%してから、#divのouterWidth(ここでは、widthとpaddingの計)にleftしています。(ライブラリ内)
複数モーダルウィンドウ切り替え
個人的に必要となったので記載しておきます。
現状だとひとつのモーダルを開いた状態で、別のを開くと互いに重なりあってしまいます。そこで、別のモーダルを開いた際に、現在のモーダルを閉じるよう実装してみました。デモ
<a rel="leanModal" href="#div787-1">Edit</a> <a rel="leanModal" href="#div787-2">Edit</a> <div id="parentdiv"> <div id="div787-1"><<モーダルウィンドウ内に表示する要素>></div> <div id="div787-2"><<モーダルウィンドウ内に表示する要素>></div> </div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ .... modalparent: "#parentdiv" // 親要素のidを追加 }); }); </script>
jquery.leanModal.min.jsを修正(29行目付近)
// 追加 ↓ $(o.parentdiv).children().css({"display":"none"}); // 追加 ↑ $(modal_id).css({ "display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px" });
やっていること
対象モーダルを表示する前に兄弟要素をいったん全てdisplay: noneにして、それから対象の要素を表示するようにしています。
制限
モーダルウィンドウの要素は全て同一親要素内に収めなくてはいけない。(そんなに重要ではないかと)
関連記事
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
- PREV
- Skype 特定の機能を無効に
- NEXT
- 藤崎八旙宮・秋の大祭(2011)
Comment
http://leanmodal.finelysliced.com.au/
[…] シンプルにモーダルウィンドウを実装できる「leanModal」〜Think deeply, Do less, More effective〜 […]
シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/S1lrYDV0eS
シンプルで良い
シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/gr7SiJqMTj
シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/mAflaSu7Bj
シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/WwcPhphQmf
シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/VCD3xk9RJp
ポップアップ / “jQuery: シンプルにモーダルウィンドウを実装できる「leanModal.js」 | Think deeply, Do less, More effective” http://t.co/X45CZD4phn
モーダル
とても簡単でした!|シンプルにモーダルウィンドウを実装できる「leanModal」 http://t.co/jxhEZ2dK6a
モーダル
2件のコメント http://t.co/9jJErTFtUO “jQuery: シンプルにモーダルウィンドウを実装できる「leanModal.js」 | Think deeply, Do less, More effective” http://t.co/rgMgvNopGD
ポップアップ出すやつ。今日助けてもらったjQueryシリーズ。 / “jQuery: シンプルにモーダルウィンドウを実装できる「leanModal.js」 | Think deeply, D…” http://t.co/gMCzitRjNa #jQuery #javascript
ポップアップ出すやつ。今日助けてもらったjQueryシリーズ。
#lean_overlay{ position: fixed; z-index:100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none; } #div787{ background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); display: none; padding: 30px; width: 780px; } .modal_close{ position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../img/modal_close.png); z-index: 2; }
leanModal の解説とか
jQuery: シンプルにモーダルウィンドウを実装できる「leanModal.js」 | Think deeply, Do less, More effective http://bit.ly/W2IvA9