自前のモーダルウィンドウ

以前、固定のモーダル表示ということで、書いたのですが、
http://blog.zaq.ne.jp/oboe2uran/article/1049/

やはり、ドラッグ可能なモーダルウィンドウと呼べるものに書き換えてみました。

jQuery-UI を使います。

外観としてシャドウも付けます。

赤字が修正した部分です。

/*
 * modal.js
 */
$(function(){
   /**
    * モーダルコンテナの作成
    * @param width 幅
    * @param height 高さ
    * @param backgroudColor 背景色
    * @returns モーダルコンテナオブジェクト
    */
   createModalContainer = function(width, height, backgroudColor){
      $('body').prepend('<div></div>');
      var modal = $('body').children().first();
       modal.css("display", "none");
      modal.css("position", "fixed");
      modal.css("width", "100%");
      modal.css("height", "100%");
      modal.append('<div></div>');
      var background = modal.children().first();
      background.css("position", "fixed");
      background.css("width", "100%");
      background.css("height", "100%");
      background.css("background-color", "#000000");
      background.css("opacity","0.55");
      background.css("filter","alpha(opacity=55)");
      background.css("-ms-filter",'"alpha(opacity=55)"');
      background.after("<div></div>");
      var container = background.next();
      container.css("position", "relative");
      container.css("width", width);
      container.css("height", height);
      container.css("background-color", backgroudColor);
      container.css("padding", "10px");
      container.css("box-shadow", "#202020 2px 0px 12px 6px");
      return container;
   };
   /**
    * モーダルのOPEN/CLOSE設定
    * @param modalcontent モーダルコンテナオブジェクト
    * @param modal clickでモーダル表示するセレクタ
    * @param modal clickでモーダルを閉じるセレクタ
    */
   modalSet = function(modalcontent, open, close){
      var body_margin = $('body').css("margin");
      var body_padding = $('body').css("padding");
      var margin_top = ($(window).height()-$(modalcontent).height())/2;
      var margin_left = ($(window).width()-$(modalcontent).width())/2;
      $(modalcontent).css({top:margin_top+"px", left:margin_left+"px"});
      $(window).resize(function(){
         var margin_top = ($(window).height()-$(modalcontent).height())/2;
         var margin_left = ($(window).width()-$(modalcontent).width())/2;
         $(modalcontent).css({top:margin_top+"px", left:margin_left+"px"});
      });
      $(open).click(function(){
         $(modalcontent).parent().fadeIn(500);
         $('body').css("margin", "0");
         $('body').css("padding", "0");
         $(modalcontent).draggable({ containment: 'body' });
         return false;
      });
      $(close).click(function(){
         $(modalcontent).parent().fadeOut(250);
         $('body').css("margin", body_margin);
         $('body').css("padding", body_padding);
         return false;
      });
   };
});



呼び出しも、

var modalContainer = createModalContainer(400, 300, "#ffffff");
modalContainer.load( モーダルとして表示するＨＴＭＬソースを指定 );
modalSet(modalContainer, "#open_modal", "#modal_close");

という具合です。

サーバに置く前にローカルで、chrome で試すには、

--allow-file-access-from-files を指定してブラウザ起動しないとなりませんが。