页面中有一个层先是隐藏着的，当点击按钮时弹出该层，并且显示在页面中间，且可以拖动该层，该怎么实现呢，请大家多多帮忙哦，附上源码哦，谢谢咯！
下面是我这个div的代码
<div id="controlview" style="position:absolute; display:none; top:1px; left:1px; width:400px; height:200px; background:#fff; z-index:99">
<div style="background-image:url(../Theme/Default/images/top_pop.gif); background-repeat:no-repeat; width:400; height:34px; font-size:13px; font-weight:bold;"><div style=" line-height:30px; float:left; padding-left:10px;">模块编辑</div>
<div style="float:right;">
<input type="button" onclick="hideDiv()" value="" style="height:20px; width:40px; cursor:pointer; background-color:Transparent;" /></div>
</div>
<div style=" padding:10px; background-image:url(../Theme/Default/images/mid_pop.gif); background-repeat:repeat-y; width:400; height:209px;><asp:DataList ID="dlSel" runat="server" RepeatDirection="Horizontal" >
<ItemTemplate>
<input type="checkbox" name="chkModule"
id="chk_<%#DataBinder.Eval(Container.DataItem,"mid") %>"
value="<%#DataBinder.Eval(Container.DataItem,"Divname") %>" /><%#DataBinder.Eval(Container.DataItem,"Module") %>
</ItemTemplate>
</asp:DataList></div>
<div style="background-image:url(../Theme/Default/images/bottom_pop.gif); padding-right:5px; padding-top:6px; text-align:right; background-repeat:no-repeat; width:400; height:37px;">
<span class="changemodbtn"><asp:Button ID="Button1" style="color:#314f69;" CssClass="changemod" runat="server" Text="改变模块" onclick="Button1_Click" OnClientClick="getNotSel()" /></span> </div>
</div>
下面是我这个div的代码
<div id="controlview" style="position:absolute; display:none; top:1px; left:1px; width:400px; height:200px; background:#fff; z-index:99">
<div style="background-image:url(../Theme/Default/images/top_pop.gif); background-repeat:no-repeat; width:400; height:34px; font-size:13px; font-weight:bold;"><div style=" line-height:30px; float:left; padding-left:10px;">模块编辑</div>
<div style="float:right;">
<input type="button" onclick="hideDiv()" value="" style="height:20px; width:40px; cursor:pointer; background-color:Transparent;" /></div>
</div>
<div style=" padding:10px; background-image:url(../Theme/Default/images/mid_pop.gif); background-repeat:repeat-y; width:400; height:209px;><asp:DataList ID="dlSel" runat="server" RepeatDirection="Horizontal" >
<ItemTemplate>
<input type="checkbox" name="chkModule"
id="chk_<%#DataBinder.Eval(Container.DataItem,"mid") %>"
value="<%#DataBinder.Eval(Container.DataItem,"Divname") %>" /><%#DataBinder.Eval(Container.DataItem,"Module") %>
</ItemTemplate>
</asp:DataList></div>
<div style="background-image:url(../Theme/Default/images/bottom_pop.gif); padding-right:5px; padding-top:6px; text-align:right; background-repeat:no-repeat; width:400; height:37px;">
<span class="changemodbtn"><asp:Button ID="Button1" style="color:#314f69;" CssClass="changemod" runat="server" Text="改变模块" onclick="Button1_Click" OnClientClick="getNotSel()" /></span> </div>
</div>
<!--AddLink层-->
<div style="position: absolute; background-color: White; border: 3px solid #B8D3F1;
left: 250px; top: 100px; width: 350px; display: none; overflow: auto;" id="openid">
<div style="float: right; color: white; padding: 3px; cursor: pointer" id="overid"
onclick="closewin()">
<img src='Images/remove.png' style='height: 12px; width: 12px; bgcolor: #FFFFFF'
alt='关闭' /></div>
<div style="padding: 7px 0px 5px 7px;">
<table style="padding: 5px; width: 100%;">
<tr>
<td style="width: 35px;" align="right">
链接名称
</td>
<td style="width: 65px;">
<input type="text" runat="server" id="linkname" name="linkname" /><span id="msgname"></span>
</td>
</tr>
<tr>
<td align="right">
链接地址
</td>
<td>
<input type="text" runat="server" id="linkaddress" name="linkaddress" /><span id="msgaddress"></span>
</td>
</tr>
<tr>
<td align="right">
排序
</td>
<td>
<input runat="server" type="text" id="linkorder" name="linkorder" onkeyup="value=value.replace(/[^0-9_]/g,'')" /><span
id="msgorder"></span>
</td>
</tr>
<tr>
<td align="right">
链接类型
</td>
<td>
<select id="linktype" runat="server" onchange="changeitem()">
<option value="0">--请选择--</option>
<option value="1">本站链接</option>
<option value="2">友情链接</option>
</select><span id="msgtype"></span><br />
<asp:Label ID="imglink" runat="server" Text=""></asp:Label>
<asp:HiddenField ID="linkid" runat="server" Value="" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<div id="linkfiledown" style="display: none;">
<asp:FileUpload ID="getlink" runat="server" />
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="GetlinkBtn" runat="server" Text="提 交" OnClientClick="return check();"
OnClick="GetlinkBtn_Click" />
<input type="button" onclick="return ClearText();" value="清 空" />
</td>
</tr>
</table>
</div>
</div>
<!--层结束-->
<script language="javascript" type="text/javascript">
//判断连接类型
function changeitem() {
var item = $("#linktype").val();
if (item == "2") {
$("#linkfiledown").css("display", "block");
}
else {
$("#linkfiledown").css("display", "none");
}
}
//关闭方法
function closewin() {
//关闭层和清除文本参数
$("#openid").hide(300);
$("#shutid").hide(100);
$("#linkfiledown").css("display", "none");
} var posX;
var posY;
var popDiv;
var dragable;
//鼠标按下事件
function down(e, openid) {
popDiv = document.getElementById(openid);
popDiv.style.cursor = "move";
e = e || window.event; //如果是IE 活着
posX = e.clientX - parseInt(popDiv.style.left);
posY = e.clientY - parseInt(popDiv.style.top);
dragable = true;
document.onmousemove = move;
}
//鼠标移动事件
function move(ev) {
if (dragable == true) {
ev = ev || window.event; //如果是IE
popDiv.style.left = (ev.clientX - posX) + "px";
popDiv.style.top = (ev.clientY - posY) + "px";
}
}
//鼠标抬起事件
function up() {
dragable = false;
popDiv.style.cursor = "default";
} //创建模态层
function HoutDiv() { //先要移除模态层
$("#shutid").remove();
//创建模态层添加属性
var div = document.createElement("div");
div.setAttribute("id", "shutid");
document.body.appendChild(div);
$("#shutid").css({ position: "absolute", left: "0px", top: "0px", background: "#CCCCCC" });
document.getElementById("shutid").style.filter = "Alpha(opacity=60)";
document.getElementById("shutid").style.opacity = "0.6";
//添加模态层宽高
$("#shutid").css("width", $(document).width());
$("#shutid").css("height", $(document).height());
//层的级别
$("#shutid").css("z-index", "1");
} //打开浮动层
function updatelink(linkid, linkname, linkaddress, linkorder, linktype, imglink) {
debugger;
$("#openid").show(300);
//层的级别最高
$("#openid").css("z-index", "2");
HoutDiv(); //调用遮罩层 $("#linkname").val(linkname);
$("#linkaddress").val(linkaddress);
$("#linkorder").val(linkorder);
$("#linktype").val(linktype);
$("#imglink").text(imglink);
$("#linkid").val(linkid);
} //检查表单
function check() {
var linkname = $("#linkname").val();
var linkaddress = $("#linkaddress").val();
var linkorder = $("#linkorder").val();
var linktype = $("#linktype").val(); if (linkname == "") {
$("#msgname").fadeIn(5000, function() {
$("#msgname").html("*请输入链接名");
$("#msgname").fadeOut("slow");
$("#linkname").focus();
});
return false;
} if (linkaddress == "") {
$("#msgaddress").fadeIn(5000, function() {
$("#msgaddress").html("*请输入链接地址");
$("#msgaddress").fadeOut("slow");
$("#linkaddress").focus();
});
return false;
} if (linkorder == "") {
$("#msgorder").fadeIn(5000, function() {
$("#msgorder").html("*请输入排序大小");
$("#msgorder").fadeOut("slow");
$("#linkorder").focus();
});
return false;
} if (linktype == "0") {
$("#msgtype").fadeIn(5000, function() {
$("#msgtype").html("*请输入选择类型");
$("#msgtype").fadeOut("slow");
$("#linktype").focus();
});
return false;
} else {
return true;
}
} //重置表单
function ClearText() {
$("#linkname").val("");
$("#linkaddress").val("");
$("#linkorder").val("");
$("#imglink").text("");
$("#linkid").val("");
}
</script>
所有你想要的，都有
$(document).ready(function() {
$("#divLayout").dialog({ //divLayout这是DIV，DIV里面的内容可以直接在html里面先编辑好
bgiframe: true,
resizable: false,
autoOpen: false,
height: 400,
width: 650,
modal: true,
title: '自定义设置',
//hide: 'slide',
buttons: {
"取消": function() {
$(this).dialog('close');
},
"确定": function() {
$(this).dialog('close');
}
}
});
});$(function(){
$("#btnAdd").dialog('open');
});