jQuery UIを使わずにmodalを表示するロジックをメモ書きします。
※modal, modalessウィンドウのサイズやカラーは適当
code
JS
// modal var modalWindow = (function() { return { open: function(modal) { var $cover = $("div.cover"); $cover.width($(window).width()).height($(window).height()); $cover.show(); modal.css("top", $(window).scrollTop() + 40); modal.css("left", $(window).width() / 2 - modal.width() / 2); modal.show(); }, close: function(modal) { $("div.cover").hide(); modal.hide(); } }; })(); // modeless var modelessWindow = (function() { return { open: function(modeless) { modeless.addClass("modeless"); modeless.css("top", $(window).scrollTop() + 40); modeless.css("left", $(window).width() / 2 - modeless.width() / 2); modeless.show(); }, close: function(modeless) { modeless.removeClass('modeless'); modeless.hide(); } }; })();
CSS
/* modal */ body { z-index: 1; } .cover { display: none; position: fixed; top: 0; left: 0; width: 100%; opacity: 0.5; background-color: #aaaaaa; z-index: 990; } .dialog { display: none; position: absolute; /*top: 60px;*/ z-index: 999; } .dialog_contents { border-radius: 5px; padding: 20px; background-color: #ffffff; } p.dialog_close_button { width: 1em; } /* modeless */ .modeless { border-radius: 4px; background: #3ff; box-shadow: 0px 0px 4px #333333; line-height: 0px; }
HTML
overlayが必要です。ここではclass="cover"で実装します。modalもしくはmodelessウィンドウで表示したいコンテンツを書いて下さい。閉じるボタンを実装する場合と合わせて下記の通りに出来ます。
<div class="cover"></div> <section id="section_id" class="dialog"> <div class="dialog_contents"> <p class="dialog_close_button">×</p> </div> ここにコンテンツ </section>
使い方
modal用のHTMLを用意してmodalに表示したいコンテンツごとデフォルト非表示、何かしらのアクションを起こした際に表示するロジックをページごとJSで呼んでやればいいです。仮にボタンをクリックして呼び出すと想定して、次のように出来ます。
// open modal window modalWindow.open($("#~~")); // open modeless window modelessWindow.open($("#~~")); // close modal window $("p.dialog_close_button").on("click", function() { modalWindow.close($("#~~")); });
基本的に呼び出す側は呼び出し処理を1行で書けるとシンプルで見やすくなります。もしjQuery UIで実装するのであればもっと楽なんですが、あちらはたくさん独自のclassを追加してくれるので後々デザインが面倒になるでしょう。しかしdraggable()を使えばドラッグ可能に出来るしその他便利な機能もついているので中々捨てがたいものはあります。