JavaScript弹出窗口DIV层效果代码 [

document对象]

　　该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

　　属性

　　alinkColor 活动链接的颜色(ALINK)

　　anchor 一个HTMI锚点,使用#lt;A NAME=#gt;标记创建(该属性本身也是一个对象)

　　anchors array 列出文档锚点对象的数组(#lt;A NAME=#gt;)(该属性本身也是一个对象)

　　bgColor 文档的背景颜色(BGCOLOR)

　　cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

　　fgColor 文档的文本颜色(#lt;BODY#gt;标记里的TEXT特性)

　　form 文档中的一个窗体(#lt;FORM#gt;)(该属性本身也是一个对象)

　　forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

　　lastModified 文档最后的修改日期

　　linkColor 文档的链接的颜色,即#lt;BODY#gt;标记中的LINK特性(链接到用户没有观察到的文档)

　　link 文档中的一个#lt;A HREF=#gt;标记(该属性本身也是一个对象)

　　links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

　　location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

　　referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

　　title 文档的标题((TITLE#gt;)

　　vlinkColor 指向用户已观察过的文档的链接文本颜色,即#lt;BODY#gt;标记的VLINK特性

　　方法

　　clear 清除指定文档的内容

　　close 关闭文档流

　　open 打开文档流

　　write 把文本写入文档

　　writeln 把文本写入文档,并以换行符结尾

[window对象]

　　它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

　　属性

　　defaultStatus 缺省的状态条消息

　　document 当前显示的文档(该属性本身也是一个对象)

　　frame 窗口里的一个框架((FRAME#gt;)(该属性本身也是一个对象)

　　frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)

　　history 窗口的历史列表(该属性本身也是一个对象)

　　length 窗口内的框架数

　　location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)

　　name 窗口打开时,赋予该窗口的名字

　　opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)

　　parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

　　self 当前窗口或框架的同义词

　　status 状态条中的消息

　　top 包含当前框架的最顶层浏览器窗口的同义词

　　window 当前窗口或框架的同义词,与self相同

　　方法

　　alert() 打开一个Alert消息框

　　clearTimeout() 用来终止setTimeout方法的工作

　　close() 关闭窗口

　　confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false

　　blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

　　focus() 把指定的窗口带到前台(另一个新方法)

　　open() 打开一个新窗口

　　prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

　　setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序

　　事件处理程序

　　Onload() 页面载入时触发

　　Onunload() 页面关闭时触发
http://www.cnblogs.com/maxianghui/archive/2006/09/18/507418.html
在本教程中，我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。

创建一个弹出DIV窗口可能是现在网站/网页***中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了，理由有二：首先，不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战；其次，兼容性不够强——有相当多的浏览器屏蔽了这种JS的 Alert()方法。于是，一个良好用户体验的网站需要一种更合理的解决方案——使用很少的HTML代码，很少的CSS代码和几行的JavaScript 代码来模拟浏览器默认的弹出窗口（即替换掉默认的Alert()界面和功能）。

查看演示Popup 下载实例Demo Rar

实现原理：

首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

实现过程:

就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。

<div id="popupcontent">这是一个DIV弹窗效果!</div>

弹出窗口的CSS修饰代码：

接下来，让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）, visibility（可见性）和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形如：

#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}

从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。

大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。

JavaScript代码用于触发和显示弹出窗口：

这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然，这两个函数之中会包含一些主体逻辑。

过程函数中需要顺序包含的逻辑：

计算JavaScript弹出窗口在屏幕上的显示位置（定位）；
在弹出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口；
显示弹出窗口。

为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。

弹出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。

如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取弹出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。

var popUp = document.getElementById("popupcontent");

在获取这个（弹出窗口）DOM对象之后，我们可以在JS代码中修改窗口的相对的位置和窗口大小。

popUp.style.top = "200px";//窗口距离浏览器内容区最上方的偏移值 
popUp.style.left = "200px";//窗口距离浏览器内容区最左边的偏移值
popUp.style.width = w + "px";//窗口的宽度
popUp.style.height = h + "px";//窗口的高度

接下来，我们需要给窗口添加一个“关闭”按钮，用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能，首先我们需要声明一个全局变量，用于存储弹出窗口DIV中的内容。这是因为，如果你在一个页面中显示多个内容不同的弹出窗口，你不需要将按钮重复的复制到这些DIV层中，这样就简化了行为逻辑：

if (baseText == null) baseText = popUp.innerHTML; 
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window
<button></div>";

最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现，设置一下这个按钮对象的向上的空白边即可（空白边的数值设置成稍小于整个弹出窗口的DIV高度即可）。

至此，所有的行为逻辑讲解完毕，最后的弹窗显示函数的完整代码如下：

var baseText = null; 

function showPopup(w,h){   
var popUp = document.getElementById("popupcontent");    
popUp.style.top = "200px";   
popUp.style.left = "200px";   
popUp.style.width = w + "px";   
popUp.style.height = h + "px";    
if (baseText == null) baseText = popUp.innerHTML;   
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";    
var sbar = document.getElementById("statusbar");   
sbar.style.marginTop = (parseInt(h)-40) + "px";   
popUp.style.visibility = "visible";
}

隐藏弹出窗口：

隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。

function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

拓展HTML代码最终实现弹窗效果：

我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。

比如，需要在鼠标移动到某连接上时弹出窗口：

<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>

需要在鼠标点击某个连接时弹出窗口：

<a href="#" onclick="showPopup(300,200);" >Open popup</a>