javascript实现模式窗口

这两天在腾讯的修改那一块   觉得挺好看   刚好朋友让我给他做  

开始的时候不知道这是什么东西    师父说  那是模式窗口 

网上找了一些资料   然后自己开始做

已完成：

JavaScript代码如下：

function $(_sId)
{return document.getElementById(_sId);}
  
function moveDiv(event, _sId)
{
     var oObj = $(_sId);   
     oObj.onmousemove = mousemove;
     oObj.onmouseup = mouseup;
     oObj.setCapture ? oObj.setCapture() : function(){};
     oEvent = window.event ? window.event : event;
     var dragData = {x : oEvent.clientX, y : oEvent.clientY};
     var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
   
     function mousemove()
     {
         var oEvent = window.event ? window.event : event;
         var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
         var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
         oObj.style.left = iLeft;
         oObj.style.top = iTop;
         dragData = {x: oEvent.clientX, y: oEvent.clientY}; 
     }
   
     function mouseup()
     {
         var oEvent = window.event ? window.event : event;
         oObj.onmousemove = null;
         oObj.onmouseup = null;
         if(oEvent.clientX < 1 || oEvent.clientY < 1)
         {
             oObj.style.left = backData.y;
             oObj.style.top = backData.x;
         }
             oObj.releaseCapture ? oObj.releaseCapture() : function(){};
     }
}

function closeDiv(_sID)
{
    /* var oObj = $(_sID);
     var overlay = $("overlay");   
     if(overlay != null)
     {
         overlay.outerHTML = "";
     }
     oObj.style.display = "none";*/
  var oObj = document.getElementById(_sID);
  var overlay = document.getElementById("overlay");
  if(overlay!=null){
   overlay.outerHTML = "";
  }
     oObj.style.display = "none";
    
}

function showDiv(_sID,event)
{
     var arrySize = getPageSize();
     var oObj = $(_sID);
     //创建一个DIV,改名为 overlay 这个是透明的层   
     var oDiv =document.createElement("div");
     oDiv.id = "overlay";
     document.body.appendChild(oDiv);
     var overlay = $("overlay");
     overlay.style.height = arrySize[1];
     overlay.style.width = arrySize[0];
     //alert(arrySize[1]);   
     if(event == null)
     {
         if(oObj.style.left == "")
         {
             oObj.style.left = arrySize[0] / 2 - 150 ;
         }
        
         if(oObj.style.top == "")
         {
             oObj.style.top =  arrySize[0] / 2;
         }       
     }
     else
     {       
         var iEvent= window.event ? window.event : event;       
         oObj.style.left = arrySize[0] / 2 - 150 ; // iEvent.clientX;
         oObj.style.top = arrySize[1] / 2 - 150 ;// iEvent.clientY;
        
     }
    
     oObj.style.display = "block";
     overlay.style.display = "block";
     overlay.style.zindex = oObj.style.zindex - 1;
}

//取得页面大小
function getPageSize(){
    
     var xScroll, yScroll;
    
     if (window.innerHeight && window.scrollMaxY) {   
         xScroll = document.body.scrollWidth;
         yScroll = window.innerHeight + window.scrollMaxY;
     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
         xScroll = document.body.scrollWidth;
         yScroll = document.body.scrollHeight;
     } else { // Explorer Macwould also work in Explorer 6 Strict, Mozilla and Safari
         xScroll = document.body.offsetWidth;
         yScroll = document.body.offsetHeight;
     }
    
     var windowWidth, windowHeight;
     if (self.innerHeight) {    // all except Explorer
         windowWidth = self.innerWidth;
         windowHeight = self.innerHeight;
     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
         windowWidth = document.documentElement.clientWidth;
         windowHeight = document.documentElement.clientHeight;
     } else if (document.body) { // other Explorers
         windowWidth = document.body.clientWidth;
         windowHeight = document.body.clientHeight;
     }   
    
     // for small pages with total height less then height of the viewport
     if(yScroll < windowHeight){
         pageHeight = windowHeight;
     } else {
         pageHeight = yScroll;
     }

     // for small pages with total width less then width of the viewport
     if(xScroll < windowWidth){   
         pageWidth = windowWidth;
     } else {
         pageWidth = xScroll;
     }


    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
     return arrayPageSize;
}



CSS样式如下：

@CHARSET "UTF-8";
img{
    border:0px;
}

#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 500px;
    background-color: #000;
    filter:alpha(opacity=70);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

.floatDiv{
    padding:0 0 0 0;   
    position:absolute;
    width:300px;
    margin:0 0 0 0;
    z-index:100;
    border:1px solid #DADADA;
    background:#FFF; padding:1px;
}

.floatDiv .divTitle{
    background:#E0E0E0 url('../images/dragForm/title_bg.gif');
    background-position:top left;
    background-repeat:repeat-x;
    height:25px;
    line-height:25px;
    padding:0px 4px;
    cursor:default;
}

.floatDiv .divContent{
    padding:3px;
    min-height:100px;
    height:auto; cursor:default;
}

.floatDiv .divFoot{
    background:#F0F0F0;
    text-align:right;
    padding:4px;
    background:#E0E0E0 url('../images/dragForm/bottom_bg.gif');
    background-position:top left;
    background-repeat:repeat-x;
}

.floatDiv input.divButton{
    background:#E0E0E0 url('../images/dragForm/button_bg.gif');
    background-position:top left;
    background-repeat:repeat-x;
    border:1px solid #D1D3D2;
    height:21px;
    font-size:12px;
    padding:2px 5px;
    color:#626264;
}


jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<link href="./Css.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="./javascript.js"></script>
</head>

<body>

<div id="main">
    <a href="javascript:showDiv('floatDiv');">show</a>
<input type="button" onclick="showDiv('floatDiv',event);" value="显示在这里" />

</div>
<div id="floatDiv" class="floatDiv" style="display:none;">
    <div class="divTitle" onmousedown="moveDiv(event,'floatDiv');">
        <div style="float:left; width:250px;">提示窗口</div>
        <div style="float:right;text-align:right; height:25px;" >
            <a href="javascript:;" onclick="closeDiv('floatdiv');"><img src="images/dragform/ico_close.gif" onmouseout="this.src='images/dragform/ico_close.gif';" onmousemove="this.src='images/dragform/ico_close1.gif';" align="absmiddle" alt="关闭" /></a>
        </div>       
    </div>
    <div class="divContent" >
        <p>根据系统设置，修改密码前必须通过安全验证  
       
    </p>
  
    <form action="">
     <table>
      <tr>
       <td>你父亲的名字是什么？</td>
       <td><input type="text" name="answer"/></td>
      </tr>
     </table>
     <div class="divFoot">
        <input type="submit" class="divButton" value="确 定" /><input type="button" class="divButton" onclick="closeDiv('floatdiv')" value="取 消" />
    </div>
    </form>
    </div>
   
</div>
</body>

</html>

《测试已通过，在火狐里面效果不是很好，在IE8中，可以很好的看到效果》