Javascript DOM 编程实例讲解--仿LightBox效果提示框
作者：海啸 来源：无忧脚本 发布时间：2008-05-01 13:25:00
做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编程的基础知识。
0
投稿猜你喜欢
佛爷去了公司的年夜饭，我有点无聊就在公司 Coding 点东西玩玩，于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为“是男人坚持 100- 在DreamWeaver中编写CSS,这种编写习惯本站(twocity.cn)并不提倡,不过由于"可视化"和操作简便,使
- 从MySQL 5.0.2开始，通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 1 问题描述最近与诸位聊起，在用户体验网站产品、完成任务的过程中，页面的切换到底是新开窗口，还是当前页面跳转，哪一种是最佳的用户体验。这一讨
- '-----------------------------------------------------------
- 所有数据库和状态文件都包含在其中。但是，在确定数据目录内容的布局中管理员有某些职责。本文讨论为什么要移动数据目录的各个部分(甚至是字典本身)
- 对于个人站长来说，如何能使自己的网站与众不同、充满个性，一直是不懈努力的目标。除了尽量提高页面的视觉效
- 环境：A机器和B机器都是LINUX系统，但由于B机器已经空间不足，所以停掉不停操作数据库的服务后 ，准备在A机器进行导出操作。导出语句 ex
- 阅读上一篇：javascript面向对象编程（一）[javascript模拟传统OOP]javascript是一种非常灵活的语言，它的灵活度
- 1。建立数据库表 表名为online 设如下字段 id '用来记录每一个访问都的session.sessionid name
- 【代码示例】 [code=SQL] DELIMITER $$ DROP FU
- 我们可以先建立一个包含文件名，文件标题的待检索文件的数据库，然后，用ADO方式来访问它，并建立记录集对象。具体代码和说明见下：
- 假设mysql安装在c:盘，mysql数据库的用户名是root，密码是123456，数据库名是database_name，在d:盘根目录下面
- 昨天看到设计师提供的一张有关多个设计师角色间的漫画图（如下图），着实感到有点讽刺。现在的设计还只是停留在“盲人摸象”的阶段，为什么会这样？在
- 今天在开发一个手机短信通讯录的前端界面时，界面中使用了checkbox，来做为各项的选择控件，但是操作时，除了点差子。由于逻辑需要，需要预先
- 一、数字类型所谓的“数字类”，就是指 DECIMAL 和 NUMERIC，它们是同一种类型。它严格的
- 本文进通过实例，讲述通过 prototype 自定义方法的过程，旨在抛砖引玉，如果不对的地方，欢迎指正！prototype 是在 IE 4
- 腾讯“月捐计划”倡导爱心人士，通过每月小额捐款的形式，长期关注和支持公益项目。并和亿万爱心网友一起，每人每月1份爱，点滴付出，汇成爱海，形成
- 当然是可以的，而且非常简单，今天就教大家在ASP中不用模板生成HTML静态页的方法。这里假设有一个htmer.asp动态页面，你想把它生成为
- 程序设计是困难的，其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健
