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

(提示:本站原创,转载请指名出处http://www.yaohaixiao.com)

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

演示地址:http://www.yaohaixiao.com/code/alertbox/index.htm
实际开发应用演示:http://vv8.ising99.com/

 

图一

实现原理：
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;，这样就做到了提示层在屏幕中间显示。