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

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にして、それから対象の要素を表示するようにしています。

制限

モーダルウィンドウの要素は全て同一親要素内に収めなくてはいけない。(そんなに重要ではないかと)

  • このエントリーをはてなブックマークに追加

関連記事

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

Comment

  1. #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; }

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑