用JavaScript编写弹出层原理分析及初步实现

本文链接：https://blog.csdn.net/guaguapi_ndsc/article/details/7953287

基本原理

具体步骤

完整实例代码

兼容性检查

总结

基本原理

利用JS编写弹出层，关键是要知道JavaScript操作HTML文档的原理，即要知道HTML DOM。

我们编写的一个个网页实际上是一份份HTML文档，这份HTML文档包括标签和标签之间的内容。JavaScript如何操作HTML文档呢？所以要定义HTML文档的操作方法，这就是HTML DOM。

HTML DOM是HTML Document Object Model的缩写，翻译成中文是，HTML文档对象模型。它定义了访问和操作HTML文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树），如图1。

HTML文档树

图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>

兼容性检查