优秀的CSS+DIV弹出窗口

zhangqgc

浏览: 82576 次
性别:
来自: 青岛

最近访客更多访客>>

freeflash1

zzy_001

heysummer

ckql

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前台>>CSS

CSS

1、弹出窗口样式：

<style>
/*弹出编辑窗口样式*/
#massage_box {
position: absolute;
left: expression((body.clientWidth-350)/2);
top: expression((body.clientHeight-200)/2);
width: 500px;
height: 200px;
filter: dropshadow(color=#666666,offx=3,offy=3,positive=2);
z-index: 2;
visibility: hidden;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: expression(body.scrollWidth);
height: expression(body.scrollHeight);
background: #666;
filter: ALPHA(opacity=60);
z-index: 1;
visibility: hidden;
}
.massage {
border: #2D9ECA solid;
border-width: 1 1 3 1;
width: 95%;
height: 95%;
background: #fff;
color: #2D9ECA;
font-size: 12px;
line-height: 150%;
}
.header {
background: #2D9ECA;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 3 5 0 5;
color: #fff;
}
dl{padding-left:14px;}
dt{float:left;padding:12px 0 0 0;width:130px;}
dt span{float:right;}
dd{ text-align:left;height:auto;padding:8px 0;}
dd span{padding-left:100px;padding-right:20px;}

.ma_but{
	color:#fff;
	font-weight:bold;
	width:76px;
	height:23px;
	border:0px;
	background:repeat-x center middle;
	background-image:url(images/cxbut.gif);
}
.ma_but2{
	color:#fff;
	font-weight:bold;
	width:76px;
	height:23px;
	border:0px;
	background:repeat-x center middle;
	background-image:url(images/cxbut2.gif);
}
</style>

2、实现弹出窗口自由拖动效果的js代码：

var Obj=''
	document.onmouseup=MUp
	document.onmousemove=MMove
	
	function MDown(Object){
		Obj=Object.id
		document.all(Obj).setCapture()
		pX=event.x-document.all(Obj).style.pixelLeft;
		pY=event.y-document.all(Obj).style.pixelTop;
	}
		
	function MMove(){
		if(Obj!=''){
		   document.all(Obj).style.left=event.x-pX;
		   document.all(Obj).style.top=event.y-pY;
		}
	}
		
	function MUp(){
		if(Obj!=''){
		   document.all(Obj).releaseCapture();
		   Obj='';
		}
	}

3、测试页面：

<html>
<title>优秀的CSS+DIV弹出窗口</title>
<body>
<div id="massage_box">
		<div class="massage">
		   <div class="header" onmousedown="MDown(massage_box)">
		    <div style="display: inline; width: 150px; position: absolute">
		     <span id="a"></span> </div>
		    <span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float: right; display: inline; cursor: hand">× </span></div>
		   <dl style="margin-right: 25">
		    <dt><span>名称描述：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>显示URL：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>跳转URL：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>显示记录条数：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>显示方式：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>排序码：</span></dt><dd><input type="text" size="35"/></dd>
		    <dt><span>是否有效：</span></dt><dd><input type="radio" name="" value="yes" selected>是<input type="radio" name="" value="no">否</dd>
		    <dd><span><input type="button" value="保存" class="ma_but" onMouseOver="this.className = 'ma_but2'"
			onMouseOut="this.className = 'ma_but'"/></span><input type="button" value="撤销" class="ma_but" onMouseOver="this.className = 'ma_but2'"
			onMouseOut="this.className = 'ma_but'"/></dd>
		   </dl>
		</div>
	</div>
	<div id="mask">
	</div>
	<input type="button" onclick="mask.style.visibility='visible';massage_box.style.visibility='visible';a.innerHTML='编辑待办事宜';" value="弹出窗口"/>
</body>
</html>