<!DOCTYPE html PUBLIC "-//W3C//DTD X
HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.aaa{
position:absolute;
display:none;
width:300px;
height:130px;
background-color:#FFFFFF;
border:1px #CCCCCC solid;
}
.b{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:94%;
float:left;
text-align:center;
cursor:hand;
}
.c{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:5%;
float:left;
}
.d{
font-size:12px;
padding:10px;
line-height:23px;
}
.e{
width:100%;
height:20px;
line-height:20px;
text-align:center;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<!----------------
链接一-------------------->
<a href="#" onClick="javascript:divop('test1','show',1);" />链接1</a>
<a href="#" onClick="javascript:divop('test2','show',2);" />链接2</a>
<a href="#" onClick="javascript:divop('test3','show',3);" />链接3</a>
<a href="#" onClick="javascript:divop('test4','show',4);" />链接4</a>
</p>
<div id="test1" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test1','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test1','hid');" /></div>
</div>
<div id="test2" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test2','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test2','hid');" /></div>
</div>
<div id="test3" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test3','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test3','hid');" /></div>
</div>
<div id="test4" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test4','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test4','hid');" /></div>
</div>
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function divop(objid,stat,num)//控制层的显示和隐藏
{
//alert(objid);
if (stat=="show")
{
$(objid).style.display="block";
$(objid).style.left=(num*20)+"px";//
$(objid).style.top=(num*100)+"px";
}
else
{
$(objid).style.display="none";
}
}
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</body>
</html>
