Javascript DOM 编程实例讲解--仿LightBox效果提示框

做WEB前台开发也有两年多，在开发中经常要涉及到DOM编程，我想大家也跟我一样，经常要处理各种DOM编程的操作，今天我就拿一个lightbox提示框效果来作为实例，讲讲DOM编程的一些基础知识。由于个人能力有限，有什么不对的，也谢谢大家给我指出来，好了，让我们开始吧！

演示地址:http://www.yaohaixiao.com/code/alertbox/index.htm

实现原理：

1、创建节点－－利用docment.createElement()/element.createTextNode()方法动态创建节点，在通过使用element.appenChild()方法，想文档中添加创建的子节点。

2、利用position:absolute的特性--将遮照层和提示框节点的position设置为absolute,利用absolute的特性，position:absolute的节点的特点是不影响其周围节点的布局。所以我们将遮照层的position属性设置为absolute,这样遮照层即使覆盖了整个页面，但是却不影响其他节点的（正文）布局。

3、遮照－－就是要覆盖到其他层上面，所以我们就利用Javascript给遮照设置了一个z-index:10;让它覆盖到正文之上（或者说他比较厚，把其的节点都包起来了）。接着我们把再提示框的z-index设置为999从而使它在最上面显示，模拟出提示框的效果。

4、透明－－原本的遮照层是蓝色的背景，是会把它下面的正文全部遮住，但是我们使用了filter（IE）和 opacity属性设置层是透明的，以便让正文得以显示。  

5、移除节点－－使用removeChilde()方法移除提示框节点。

6、提示框居中--其实很简单，left:50％,top:50％;然后就是设置margin:-(element.height/2)px 0 0 -(element.width/2)px;，这样就做到了提示层在屏幕中间显示。

呵呵，效果我们看到，但是具体是如何来实现的呢？不要急，我在下面的内容会一步一步的给大家做分析。现在我们先来补习一些DOM编程的基础知识。