弹出对话框,点击跳出一个可拖动的层(对话框)

现在我们常见到有些网站常有这样个功能：有个按钮（如工作职位或省份或地区的选择等等）你一点就跳出一个图层(对话框)让你选择之类的。关闭它就点右上角的X。

看起来比起下拉列表确实有点方便，界面也友好。你是不是也想知道是怎么做的呢？来吧。。。。

代码如下（在FF，IE都测试通过。FF暂时无法拖动）：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body {    margin: 0px;}#div1 {    display: none;    position: absolute;    z-index: 1000;    height: 100％;    width: 100％;    background: #000000;    filter:Alpha(opacity=30);/* IE，这个就是跳出层的时候背景颜色的透明度。 */    -moz-opacity:0.30; /* Moz + FF */    opacity: 0.30; /* 支持CSS3的浏览器（FF 1.5也支持）*/}#div2 {    display: none;    position: absolute;    height: 100％;    width: 100％;    padding-top: 10％;    z-index: 1001;}#div3 {    display: block;    position: absolute;    z-index: 999;}</style><script type="text/javascript">//定义移动对象和移动坐标var Mouse_Obj="none",_x,_y;//拖动对象函数(自动)document.onmousemove=function(){    if(Mouse_Obj!=="none")    {    document.getElementById(Mouse_Obj).style.left=_x+event.x;    document.getElementById(Mouse_Obj).style.top=_y+event.y;    event.returnValue=false;    }}//停止拖动函数(自动)document.onmouseup=function(){    Mouse_Obj="none";}//确定被拖动对象函数 o为被拖动对象function m(o){    Mouse_Obj=o;    _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;    _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;}</script><div id="div1"></div><div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;"><table width="50％" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center"><tr style="cursor: move;">    <td><font color="#FFFFFF">往尚空间提示：</font></td>    <td align="right"><input type="button" value="ｘ" onClick="document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none';" style="cursor:pointer;"></td></tr><tr>    <td colspan="2" width="100％" bgcolor="#FFFFFF" height="150" align="middle">asp之家<br /><br />网址：<a href="http://www.aspxhome.com">http://www.aspxhome.com</a></td></tr></table></div><div id="div3"><input type="button" value="打开层" onClick="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block';"></div>

以上是核心代码，直接COPY到页面上运行就可以看到效果。