div在最顶层显示弹出框效果

div显示在最顶层,并且背景层变暗.

效果图如下:

代码:

html文件内容如下:

<!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" />

  <script type="text/javascript" src="coverDiv.js"></script>

  </head>  <body onload="drag();">

  <div>

   <input type="button" onclick="popSignFlow();" value="login"/>  

</div>

</body>

</html>

coverDiv.js文件内容如下:

function isIE(){
      return (document.all && window.ActiveXObject && !window.opera) ? true : false;
  }
  var loginDivWidth = 300;
  var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'
       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'
       + '</div><div>password:*</div><div><input type="password" size="30"/>'
        + '</div><div><input type="button" value="login" />  '
        + '  <input type="button" value="cancel" onclick="cancelSign();"/></div>';
  function cancelSign(){
    document.getElementById("sign_div").style.display = 'none';
    document.getElementById("cover_div").style.display = 'none';
   document.body.style.overflow = '';
  };
  function popCoverDiv(){
    var coverDiv = document.createElement('div');
    document.body.appendChild(coverDiv);
    with(coverDiv.style) {
    display = 'none';
     position = 'absolute';
     background = '#CCCCCC';
     left = '0px';
     top = '0px';
     var bodySize = getBodySize();
     width = bodySize[0] + 'px'
     height = bodySize[1] + 'px';
     zIndex = 98;
     if (isIE()) {
      filter = "Alpha(Opacity=60)";
     } else {
      opacity = 0.6;
     }
   }
   coverDiv.id = 'cover_div';
  }
  function getBodySize(){
   var bodySize = [];
   with(document.documentElement) {
    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;
    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;
   }
   return bodySize;
  }
  function popSign(){
    var signDiv = document.createElement('div');
    document.body.appendChild(signDiv);
    with (signDiv.style) {
     display = 'none';
     cursor='move';
     position = 'absolute';
     left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';
     top = (document.documentElement.clientHeight - 300)/2 + 'px';
     width = loginDivWidth + 'px';
     zIndex = 99;
     background = '#FFFFFF';
     border = '#66CCFF solid 1px';
   }
    signDiv.id = 'sign_div';
    signDiv.align = "center";
    document.getElementById("sign_div").innerHTML = sign_in_flow;
  }
  function popSignFlow() {
   document.getElementById("cover_div").style.display = 'block'; 
  document.getElementById("sign_div").style.display = 'block'; 
  document.body.style.overflow = "hidden";
  }
  
  //以下是拖拽
  var offsetX = 0;
  var offsetY = 0;
  var currentLeft = 0;
  var currentTop = 0;
  var isDrag = false;
 
function stopEvent(evt){
      var event = window.event?window.event:evt;
      if (event.preventDefault) {
        event.preventDefault();
        event.stopPropagation();
      } else {
        event.returnValue = false;
      }
  }
  function drag(){
   popCoverDiv();
   popSign()
   document.getElementById('sign_div').onmousedown = function(evt){
    var evt = window.event?window.event:evt;
    if ((evt.which && evt.which == 1 ) || (evt.button && evt.button == 1)){
      isDrag = true;
      offsetX = evt.clientX;
      offsetY = evt.clientY;
      currentLeft = parseInt(document.getElementById('sign_div').style.left);
      currentTop = parseInt(document.getElementById('sign_div').style.top);
    }
    stopEvent(evt);
   } 
  document.onmousemove = function(evt){
    if(isDrag){
     var evt = window.event?window.event:evt;
      document.getElementById('sign_div').style.left = evt.clientX - offsetX + currentLeft +'px';
      document.getElementById('sign_div').style.top = evt.clientY - offsetY + currentTop +'px';
   stopEvent(evt);
    }
   } 
  document.onmouseup = function(evt){
    isDrag = false;
    var evt = window.event?window.event:evt;
    currentLeft = parseInt(document.getElementById('sign_div').style.left);
    currentTop = parseInt(document.getElementById('sign_div').style.top);
    stopEvent(evt);
   }
  }