当然记得加载jquery的js文件
HTML 代码:
<div id="dagbox">
<h3><span οnclick="$('#dagbox').hide()"></span></h3>
<div class="mid">
<form>
<div>
<select name="field">
<option value="sn">按资产编号</option>
<option value="ip">按IP</option>
<option value="cb">按机房</option>
<option value="de">按备注</option>
</select>
</div>
<div class="dtbd"></div>
<div class="ml30">
<select name="op1">
<option value="等于">等于</option></select> <input type="text" name="search1" />
<br/>
<input type="radio" name="so" value='1' checked/>与 <input type="radio" name="so" value="2" > 或
<br/>
<select name="op2">
<option value="等于">等于</option></select> <input type="text" name="search2" />
</div>
<div class="dbt">
<input type="submit" οnclick="checkform(this.form)" value="确定" /> <input type="button" οnclick="$('#dagbox').hide()" value="取消"/>
</div>
<form>
</div>
</div>
CSS 样式
/* didag box */
#dagbox
{
display:none;
position:absolute;
left:200px;
top:100px;
width:298px;
height:207px;
background:url(../images/dialog/db.gif) 0 100% no-repeat;
padding-bottom:3px;
overflow:hidden;
}
#dagbox h3{background:url(../images/dialog/dt.gif) no-repeat; height:24px; position:relative;}
#dagbox h3 span{display:block;height:16px;width:19px; position:absolute;right:3px;top:5px;background:url(../images/dialog/dc.gif) no-repeat;cursor:pointer;}
#dagbox .mid{
padding:6px 9px;
background:url(../images/dialog/dm.gif) repeat-y;
height:171px;
width:280px;
}
#dagbox .mid div{cursor:default;}
#dagbox .dtbd{height:1px;overflow:hidden;background:#33abe9;font-size:0;line-height:0;width:250px;margin:5px 0px 5px 30px;cursor:default;}
.ml30{margin-left:30px;line-height:25px;text-align:center;}
#dagbox .dbt{ text-align:right;padding-top:30px;padding-right:10px;cursor:default;padding-bottom:15px;}
#dagbox .dbt input {width:80px;height:21px;line-height:19px; font-size:12px;}
#dagbox .txt{width:150px;margin-left:5px;}
js代码:
$(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $("#dagbox").css('cursor','move'); $("#dagbox").mousedown(function(e){ $(document).bind("selectstart", function(){ return false; }); _move=true; _x=e.clientX-parseInt($("#dagbox").css("left")); _y=e.clientY-parseInt($("#dagbox").css("top")); //$("#dagbox").fadeTo(20, 0.5);//点击后开始拖动并透明显示 }); $(document).mousemove(function(e){ if(_move){ var x=e.clientX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置 var y=e.clientY-_y; //$("#stbox").html("("+x+","+y+")"); //控制在界面以内 if(x<0)x=0; if(y<0)y=0; wth=$("#dagbox").outerWidth(true); hht=$("#dagbox").outerHeight(true); if(wth+x>$(window).width())x=$(window).width()-wth; if(hht+y>$(window).height())y=$(window).height()-hht; $("#dagbox").css({top:y,left:x});//控件新位置 } }).mouseup(function(){ _move=false; $(document).bind("selectstart", function(){ return true; }); //$("#dagbox").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明 }); });