优秀的CSS+DIV弹出窗口

zhangqgc · 发表于 2013-2-7 23:37:37

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=MUpdocument.onmousemove=MMovefunction MDown(Object){Obj=Object.iddocument.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 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" onMouseOut="this.className = 'ma_but'"/></span><input type="button" value="撤销" class="ma_but" onMouseOut="this.className = 'ma_but'"/></dd> </dl></div></div><div id="mask"></div><input type="button" value="弹出窗口"/></body></html>

		自动登录	找回密码
密码			立即注册