jQueryでフローティングウィンドウ。

jQueryでフローティングウィンドウを、ちょっとだけカスタマイズしてみた。

理想
・周りは暗くする
・後ろの制御不可にする
・閉じるボタンをつける


【css】
#floatWindow{
display:none;
position:absolute;
top:100px;
left:100px;
z-index: 100000;
border-radius:5px;
}
#floatWindow a.close{
position:absolute;
right:20px;
top:1px;
}
#floatWindow a.close img{
border:none;
}
#floatWindow dl{
width:100%;
height:100%;
background:#fff;
margin:0;
}
#floatWindow dl dt{
height:25px;
line-height:25px;
text-indent:1em;
color:white;
font-weight:bold;
cursor:move;
background:red;
}
#floatWindow dl dd{
margin:0;
padding:2em;
line-height:1.5;
text-indent:1em;
}

#layer {
position: absolute;
z-index: 2;
background: #000000;
top: 0px;
left: 0px;
filter: alpha(opacity=60);
opacity: 0.6;
display: none;
}


【script】
$(function(){
$("a.open").click(function(){
var width = $(document).width();
var height = $(document).height();
$('#layer').width(width)
.height(height)
.show()
.fadeTo('fast', 0.4);
$("#floatWindow").fadeIn("fast");
return false;
})

$("#floatWindow a.close").click(function(){
$("#floatWindow").fadeOut("fast");
$("#layer").fadeOut("fast");

return false;
})
$("#floatWindow dl dt").mousedown(function(e){

$("#floatWindow")
.data("clickPointX" , e.pageX - $("#floatWindow").offset().left)
.data("clickPointY" , e.pageY - $("#floatWindow").offset().top);

$(document).mousemove(function(e){
$("#floatWindow").css({
top:e.pageY - $("#floatWindow").data("clickPointY")+"px",
left:e.pageX - $("#floatWindow").data("clickPointX")+"px"
})
})

}).mouseup(function(){
$(document).unbind("mousemove")

})
})


【html】
<br /><div id="floatWindow"><a href="sample2.html" class="close">閉じる</a><dl><dt>jQueryによるフローティングウィンドウの作成</dt><dd></dd></dl></div>