http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/10/sample2.html
------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.open").click(function(){
$("#floatWindow").fadeIn("fast");
return false;
});
$("#floatWindow a.close").click(function(){
$("#floatWindow").fadeOut("fast");
return false;
});
$("#floatWindow dl dt").mousedown(function(e){
$("body").bind('selectstart', function(){
return false;
});
$("#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(){
$("body").unbind('selectstart');
$(document).unbind("mousemove");
});
});
</script>
<style type="text/css">
#floatWindow{
display:none;
position:absolute;
width:500px;
height:400px;
top:100px;
left:100px;
}
#floatWindow a.close{
position:absolute;
right:20px;
top:1px;
}
#floatWindow a.close img{
border:none;
}
#floatWindow dl{
width:100%;
height:100%;
background:url("./images/floatWindow.png");
margin:0;
}
* html #floatWindow dl{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/floatWindow.png',sizingMethod='scale');
}
* html #floatWindow dl *{
position:relative;
}
#floatWindow dl dt{
height:25px;
line-height:25px;
text-indent:1em;
color:white;
font-weight:bold;
cursor:move;
}
#floatWindow dl dd{
margin:0;
padding:2em;
line-height:1.5;
text-indent:1em;
}
</style>
</head>
<body>
<a href="#floatWindow" class="open">フローティングウィンドウの表示</a>
<div id="floatWindow">
<a href="sample2.html" class="close"><img src="./images/close.png" alt="閉じる" /></a>
<dl>
<dt>jQueryによるフローティングウィンドウの作成</dt>
<dd>今回はjQueryでフローティングウィンドウを作成する方法を解説します。フローティングウィンドウとはWebページ上にドラッグ可能な別の子ウィンドウを表示するUIのことです。ポップアップなどで表示されるウィンドウとは異なりブラウザのポップアップブロックなどの影響を受けず、また、元のサイトにレイアウトなどに影響を与えずにウィンドウを表示することが可能になっています。</dd>
</dl>
</div>
</body>
</html>
最終更新：2012年05月25日 11:43
