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
投稿猜你喜欢
本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家，具体如下：先看效果图下拉刷新React Native提- 源代码：# coding=utf-8import loggingimport osimport timeLEVELS={'debug
- 可以通过浏览器在访问者的硬盘上创建文件，因为我开始试了一下真的可以，不信你把下面这段代码COPY到一个HTML文件当中再运行一下！ <
- sql server2000分页方式很多，效率吗 当到达10万级以上就有些吃力了，这里暂时不例出来了sql server2005
- 安装pyinstallerpip install pyinstaller制作项目的.spec文件 进入django项目所在路径，
- bt种子文件转换为磁力链接BT种子文件相对磁力链来说存储不方便，而且在网站上存放BT文件容易引起版权纠纷，而磁力链相对来说则风险小一些。而且
- django settings.py 配置文件import osBASE_DIR = os.path.dirname(os.path.dir
- Xxencode编码，也是一个二进制字符转换为普通打印字符方法。跟UUencode编码原理方法很相似，唯独不同的是可打印字符不同。通个UUe
- OpenCV 是一个C++库,目前流行的计算机视觉编程库,用于实时处理计算机视觉方面的问题,它涵盖了很多计算机视觉领域的模块。在P
- 1.在pycharm下安装scrapy函数库2.将安装好scrapy函数库下的路径配置到系统path的环境变量中3.打开cmd终端输入：sc
- CGAN的全拼是Conditional Generative Adversarial Networks，条件生成对抗网络，在初始GAN的基础
- 使用input和raw_input都可以读取控制台的输入，但是input和raw_input在处理数字时是有区别的当输入为纯数字时：inpu
- 百度AI提供了一天50000次的免费文字识别额度，可以愉快的免费使用！下面直接上方法：首先在百度AI创建一个应用，按照下图创建即可，创建后会
- 在1943年，沃伦麦卡洛可与沃尔特皮茨提出了第一个脑神经元的抽象模型，简称麦卡洛可-皮茨神经元（McCullock-Pitts neuron
- 这篇文章主要介绍了python装饰器使用实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 一、什么是Python类？python中的类是创建特定对象的蓝图。它使您可以以特定方式构建软件。问题来了，怎么办？类允许我们以一种易于重用的
- 分析在Python中，字符串是不可变的。所以无法直接删除字符串之间的特定字符。所以想对字符串中字符进行操作的时候，需要将字符串转变为列表，列
- 今天在公司实在没有事做，突然就想到写下商城的购物车的前端框架，当然我这里只有购物车的增删改查，也许写的并不是那么完善，但最重要的是一个入门，
- df.fillna主要用来对缺失值进行填充，可以选择填充具体的数字，或者选择临近填充。官方文档DataFrame.fillna(self,
- 背景前段时间写了一个自动化安装 MySQL 的程序，其中有一个环节就是动态的渲染 my.cnf 文件；总的解决方案就是像 Django 渲染
