Result
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> |
