以前、固定のモーダル表示ということで、書いたのですが、
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( モーダルとして表示するHTMLソースを指定 );
modalSet(modalContainer, "#open_modal", "#modal_close");
という具合です。
サーバに置く前にローカルで、chrome で試すには、
--allow-file-access-from-files を指定してブラウザ起動しないとなりませんが。