用JavaScript编写弹出层原理分析及初步实现
目录
基本原理
具体步骤
完整实例代码
兼容性检查
总结
基本原理
利用JS编写弹出层，关键是要知道JavaScript操作HTML文档的原理，即要知道HTML DOM。
我们编写的一个个网页实际上是一份份HTML文档，这份HTML文档包括标签和标签之间的内容。JavaScript如何操作HTML文档呢？所以要定义HTML文档的操作方法，这就是HTML DOM。
HTML DOM是HTML Document Object Model的缩写，翻译成中文是，HTML文档对象模型。它定义了访问和操作HTML文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树），如图1。
图1 HTML文档树
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
我们现在要用JS编写一个弹出层，也就是在原来HTML文档内添加一个div节点，即appendChild() 方法。
具体步骤
第一步，编写HTML文档，并加上HTML事件
<html> <head> </head> <body> Hello World!这是原页面！ <a href="javascript:show()">点击弹出div框</a> </body>
第二步，编写JS事件代码
先熟悉下div基本属性，宽度（width）、高度（height ）、定位（距顶边界距离top、据左边界距离left），为了看出div是否显示出来，还要设置div的背景颜色background。
接着在HTML文档树上增加一个div节点
var newDiv=document.createElement("div");
document.body.appendChild(newDiv); 再设置div属性
newDiv.style.width = "300px";
newDiv.style.height = "200px";
newDiv.style.top = "50px";
newDiv.style.left = "50px";
newDiv.style.background = "#33393C";
完整实例代码
利用JS编写弹出层的完整代码如下：
<html>
<head>
<script language="javascript">
<!--
function show(){
var newDiv=document.createElement("div");//创建div节点
//设置div属性
newDiv.style.width = "300px";
newDiv.style.height = "200px";
newDiv.style.top = "50px";
newDiv.style.left = "50px";
newDiv.style.background = "#33393C";
document.body.appendChild(newDiv);//添加div节点
}
//-->
</script>
<title>无标题文档</title>
</head>
<body>
Hello World!这是原页面！ <a href="javascript:show()">点击弹出div框</a>
</body>
</html>
兼容性检查
-
Trident(IE内核)：IE6、IE7、IE8、IE9均检查通过 Gecko(FF内核)：火狐检查通过 Webkit：谷歌检查通过
总结
参考文献
1、
本作品采用 进行许可。
