Result
http://jsfiddle.net/kachibito/zCQzu/15/embedded/result,js,css,html
jQuery
//クリックイベント $("#showoverlay").click(function() { //オーバーレイ用のボックスを作成 $("body").append("<div id='overlay'></div>"); //フェードエフェクト $("#overlay").fadeTo(500, 0.7); $("#modalbox").fadeIn(500); }); //閉じる際のクリックイベント $("#close").click(function() { $("#modalbox, #overlay").fadeOut(500, function() { $("#overlay").remove(); }); }); $(window).resize(function() { //ボックスサイズ $("#modalbox").css({ top: ($(window).height() - $("#modalbox").outerHeight()) / 2, left: ($(window).width() - $("#modalbox").outerWidth()) / 2 }); }); $(window).resize();
css
#showoverlay{margin:25px;} #modalbox { display:none; position:absolute; z-index:1000; width:400px; padding:20px; background:#fff; border:5px solid #eee; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #overlay { opacity:0; filter: alpha(opacity=0); position:absolute; top:0; left:0; z-index:900; width:100%; height:100%; background:#000; } #close { line-height:1; font-size:14px; position: absolute; top:10px; right:10px; color:red; text-decoration:none; }
html
<div id="modalbox"> <a href="#" id="close">x</a> <p> text </p> </div> <a href="#" id="showoverlay">Show</a>