<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size: 12px;
    margin: 0px;
    height: 100%;
}
a,a:visited{
color:#39F;
text-decoration:none;
}
a:hover{
color:#F60;
}
#MaskDiv{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
opacity:0.3;
background-color:#000000;
z-index:101; 
text-align:center; 
vertical-align:middle;
}
#PopContainer{
z-index:1000;
border:1px solid #eee;
}
/*.Pop{
position:absolute;
top:120px;
left:220px;
border:1px solid red;
width:550px;
overflow:hidden;
height:200px;
}*/
#PopBackground{
position:absolute; 
width:100%; 
height:10000px; 
background:#F00; 
opacity:0.5; 
filter:Alpha(opacity=50); 
left:0; 
top:0;
}
#PopClose{
position:relative; 
top:0; left:0; 
width:100%; 
height:20px; 
background:#445588; 
text-align:right; 
cursor:move;
}
#PopClose span{
margin-right:0px;
font-size:18px; 
border:#2D66C4 1px solid; 
background-color:#E4EEFF; 
display:inline-block; /*使span样式属性width生效*/
width:18px;
height:18px;
text-align:center;
font-weight:bold; 
cursor:pointer; 
color:#0E377A;
}
#PopContent{
height:auto;
width:100%;
position:relative;
background:#FFF;
}
</style>
<script language="javascript" type="text/javascript">
<!--
  //定义全局变量
  //判断浏览器是否为IE
  var IsIE=(document.all)?true :false;
  //x,y分别表示层div边框距顶部和左边的距离
  var x=y=0;
  var ms="";
  //顶一个层
  var newDiv;  
  //弹出方法
  function testMessageBox() {
  //防止重复创建
  if(newDiv)
  {
  return;
  }
  zzdiv=document.createElement("div");
  zzdiv.id="MaskDiv";
  document.body.appendChild(zzdiv);
  newDiv=document.createElement("div"); //创建一个div
  newDiv.id="PopContainer";   
  newDiv.style.cssText="position:absolute;top:120px;left:220px;width:550px;overflow:hidden;";
  /* start 使用cssText设置样式*/
      /* str="position:absolute;top:120px;left:220px;border:1px solid red;width:550px;overflow:hidden; height:200px;";
  if(IsIE)
  {
      newDiv.style.cssText=str;  //for IE、FF
  }
  else
  {
  newDiv.setAttribute("style",str); //for FF
  }*/
      /* end */
  
  /*start 使用setAttribute()来设置样式,其中参数Pop为样式表中的类名*/
      /*newDiv.setAttribute("class","Pop"); //for FF
  newDiv.setAttribute("className","Pop"); //for IE*/
  /* end */   
      //newDiv.className="Pop"; //FF、IE通用
  document.body.appendChild(newDiv);
  var backdiv=document.createElement("div");
  backdiv.id="PopBackground";
  newDiv.appendChild(backdiv);
  var closediv=document.createElement("div");
  closediv.id="PopClose";
  closediv.onmousedown=function(){ Move(event,"PopContainer");}
  closediv.innerHTML="<span title='Esc快捷键' onclick='dclose()'>×</span>";
  newDiv.appendChild(closediv);
  var contentdiv=document.createElement("div");
  contentdiv.id="PopContent";
  contentdiv.innerHTML="你好Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>";
  newDiv.appendChild(contentdiv);
  }  
  //关闭弹出层
  function dclose(){
  if(newDiv)
  {
   newDiv.parentNode.removeChild(newDiv);
   newDiv = null;
   document.getElementById("MaskDiv").parentNode.removeChild(document.getElementById("MaskDiv"));
  }
  }
  //拖拽图层
        var ms = 0;
        function Move(event, obj) {
            event = event || window.event;
            ms = obj;
//alert(event)
            x = parseInt(document.getElementById(ms).style.left) - event.clientX;
            y = parseInt(document.getElementById(ms).style.top) - event.clientY;
//alert(parseInt(document.getElementById(ms).style.left))
        }        document.onmousemove = function(event) {
            event = event || window.event;
            if (ms) {
                document.getElementById(ms).style.left = (x + event.clientX) + 'px';
                document.getElementById(ms).style.top = (y + event.clientY) + 'px';
                //document.getElementById(ms).innerHTML = event.x;
            }
        }        document.onmouseup = function(event) {
            event = event || window.event;
            if (ms) {
                //target.releaseCapture();
                ms = "";
            }
        }
-->
</script>
</head>
<body>
<div style="text-align: left"><a href="#none" onclick="testMessageBox();">弹出窗口</a></div>
</body>
</html>