如何模拟Windows窗口和拖动

如上图所示，当用户点击按钮1的时候，在当前页面中显示一个类似Windows窗体的东西，其中包括其他控件，然后按住标题栏可以在窗口内随意拖动。应该如何坐那？最好能有个实例什么的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1、那个Windows窗体的东西是一个div，默认为隐藏。
2、点击按钮1的时候就显示那个div
3、当鼠标按住标题时，用js来写一个方法。随着当前鼠标的位置来控制div的位置，这样就达到拖动的效果。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
    <title>无标题页</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />    <script language="javascript">
        function locking()
        {
             document.all.ly.style.display="block";
             document.all.ly.style.width=Math.max(document.body.scrollWidth, document.documentElement.clientWidth) +"px"; //设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个
             document.all.ly.style.height=Math.max(document.body.scrollHeight, document.documentElement.clientHeight)+"px";  //设置层1高度满屏

             document.all.Layer2.style.display='block';
             document.all.Layer2.style.top = (document.documentElement.clientHeight/2 -document.getElementById ("Layer2").clientHeight/2)+"px"; //设置层2的距顶位置居中算法
             document.all.Layer2.style.left = (document.documentElement.clientWidth/2 -document.getElementById ("Layer2").clientWidth/2)+"px";   //设置层2的距左位置居中算法
        }

        function Lock_CheckForm(theForm)
        {
             document.all.ly.style.display='none';
             document.all.Layer2.style.display='none';
        }
    </script>    <script type="text/javascript">
        //对“拖动点”定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
        var move=false,oldcolor,_X,_Y;

        function StartDrag(obj)  //定义准备拖拽的函数
        {
            obj.setCapture(); //对当前对象的鼠标动作进行跟踪
            oldcolor=obj.style.backgroundColor;
            obj.style.background="#999";
            move=true;
            //获取鼠标相对内容层坐标
            var parentwin=document.getElementById("Layer2");
            _X=parentwin.offsetLeft-event.clientX;
            _Y=parentwin.offsetTop-event.clientY;
        }

        function Drag(obj)  //定义拖拽函数
        {
            if(move)
            {
                var parentwin=document.getElementById("Layer2");
                parentwin.style.left=event.clientX+_X+"px";
                parentwin.style.top=event.clientY+_Y+"px";
            }
        }

        function StopDrag(obj)  //定义停止拖拽函数
        {
            obj.style.background=oldcolor;
            obj.releaseCapture(); //停止对当前对象的鼠标跟踪
            move=false;
        }
    </script></head>
<body>
    <form id="form1" runat="server">
    <p>
        <input type="button" value="弹出窗口" onclick="locking();"></p>
    
    <div id="ly">
    </div>
    
    <div id="Layer2" >
        <div id ="msg_title" class="msg_title" onmousedown="StartDrag(this)" onmouseup="StopDrag(this)" onmousemove="Drag(this)">
            <a href="#" class="myfont" onclick="Lock_CheckForm(this);">[关闭]</a></div>
        <div class="msg_content">
            <p>
                确定退出？</p>
            <p>
                <input type="button" value="确定" />
                <input type="button" onclick="showclose();" value="取消" /></p>
        </div>
    </div>
    
    </form>
</body>
</html>
a:link
{
color: #FFFFFF;
text-decoration: none;
}
a:visited, a:hover, a:active
{
text-decoration: none;
}
.myfont
{
font-size: 12px;
}#ly
{
position: absolute;
top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 2;
left: 0px;
display: none;
}#Layer2
{
position: absolute;
z-index: 3;
background-color: #fff;
display: none;
width: 540px;
height: 300px;
}.msg_title
{
border: 1px solid #2982BA;
background-color: #ADDAFB;
border-bottom: 0;
text-align: right;
vertical-align: bottom;
cursor :move; /*设置指针的移动图标，若不想移动，可以去掉此行*/

/*与height大小一样可以垂直居中,适用于单行情况*/
height: 25px;
line-height: 25px;
overflow: hidden;
/*与height大小一样可以垂直居中,适用于单行情况*/
}.msg_content
{
border: 1px solid #2982BA;
background-color: #E6F7FF;
text-align: center;
height: 275px;
padding-top: 50px;
}
jquery dilog形式
jwindow
http://jqueryui.com/demos/dialog/
用Ajax的ModalPopupExtender控件可以实现
<asp:Button ID="Button3" runat="server" Text="Button" />
    <asp:Panel ID="Panel1" runat="server">
        <div id="div1" style="width: 200px; height: 20px; background-color: Fuchsia">
        <center>可以移动的窗体</center>
        </div>
        <div id="div2" style="width: 200px; height: 120px; background-color: Maroon">
            <div style="padding-top: 60px">
                <center>
                    <asp:Button ID="Button4" runat="server" Text="确定" />      
                    <asp:Button ID="Button5" runat="server" Text="取消" /></center>
            </div>
        </div>
    </asp:Panel>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" CancelControlID="Button5" OkControlID="Button4"
        runat="server" TargetControlID="Button3" PopupControlID="Panel1" PopupDragHandleControlID="div1">
    </cc1:ModalPopupExtender>