位置：首页>> 网络编程>> JavaScript>> Javascript DOM 编程实例讲解--仿LightBox效果提示框（7）

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

作者：海啸　来源：无忧脚本　发布时间：2008-05-01 13:25:00　

标签：lightbox,dom,编程,javascript

大结局

如何让层居中

#window{
   position:absolute;
   left:50％;
   top:50％;
   width:400px;
   height:180px;
   margin:-90px 0 0 -200px;
}

看出来了吗?首先定位要用absolute,z-index:999,比shadow的10要高,在它上面了，left:50％,right:50％;然后margin:-(提示框高/2)px 0 0 -(提示框宽/2)px;

最后就是给关闭按钮和确定按钮添加事件(关闭窗口--移除shadow和window节点)

移除节点--element.removeChild(objId)

很简单的几行代码

// 设置关闭和确定按钮的功能--关闭(移除)提示框
              btnEnter.onclick=aClose.onclick=function(){
              document.body.removeChild(objId);
              document.body.removeChild(shadow);
              btnShow.disabled=false;

唯一要说明的是这段代码一定是要放到document.body.appendChild(obj);下面，为什么?因为没有这调语句，我们的关闭和确定按钮虽然是已经创建了，但是还没有添加到文档中，所以我们的JS还不能通过document.getElementById()方法查询到.

好了，现在我们的提示窗口就讲解完了.来复习下我们都学习到了哪些DOM编程的知识:

1.什么是DOM?
2.NodeType (节点类型)
3.document.getElementById() 查找单个节点
4.document.getElementsByTagName() 查找多个节点
5.parentNode() 如何查找一个节点的父节点
6.nextSibling() 如何查找一个节点的兄弟(邻居)节点
7.hasChildNodes() 判断一个节点时候有子节点
8.document.createElement() 创建节点
9.setAttribute(setAttributeName,value) 给节点设置属性
10.使用JS给节点设置CSS样式
11.如何判断浏览器类型
12.appendChild()如何给节点追加子节点
13.使用CSS,如何让层居中.
14.removeChild() 如何移除一个节点的子节点

看看一个小小的程序,包含的知识点还真不少,而至于更深层的,如何使用javascript DOM编程处理XML文档,等下次有机会在跟大家一起讨论，今天收工了。

（说明：本文中有部分内容截选至《Javascript DOM 编程艺术》一书。还有，由于个人能力有限，文章中有什么错误和疏漏请大家谅解，也欢迎大家及时指正。）

推荐：苏沈小雨htmlDOM方法中文手册chm

第一页上一页 3 4 5 6

投稿

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

猜你喜欢