黑桃A

一同进步吧

javascript 弹出div窗体

<!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">
<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  >
<!----------------链接一-------------------->
<table>
<tr>
<td style="width:300px"></td>
<td>
<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>
</td></tr>
</table>
</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=(event.clientX-300)+"px";//
$(objid).style.top=event.clientY+"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>
阅读更多
博主设置当前文章不允许评论。

JavaScript 模式窗口 弹出DIV

2010年09月01日 2KB 下载

DIV+CSS弹出窗体(非常漂亮)

2010年05月01日 7KB 下载

悬浮DIV弹出窗体实现登录

2009年07月04日 22KB 下载

jQuery弹出div窗体插件大全

2012年11月10日 940KB 下载

一套漂亮的js div alert弹出窗体

2012年03月19日 53KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭