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);
   }
  }