网页制作教程:弹出层详解

武林网(www.vevb.com)文章简介：原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。

在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……

网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）

 oShow oShow.oClose oClose.oShow.oClose.oShow.oShow.

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 iWidth iHeight   oShow.oShow.iWidthoShow.iHeightoClose oClose.oShow.oClose.oShow.oShow.

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 iWidth iHeight = document.documentElement.clientHeight;  bgObj.bgObj.bgObj.document.document.  oShow.oShow.iWidthoShow.iHeight  oClosebtn.oShow.  oShow.oShow.document.  oClosebtn.onclick = oClose; bgObj.

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 window. document.event event.oClose

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

moveY moveTop moveLeft moveable docMouseMoveEvent docMouseUpEvent = document.onmouseup;titleBar titleBar.evt moveable moveX = evt.clientX; moveY = evt.clientY; moveTop moveLeft   document.moveableevt x y x x iWidthy iHeightoShow.oShow.document.moveable) {document.onmousemove = docMouseMoveEvent;document.onmouseup = docMouseUpEvent;moveable moveX moveY moveTop moveLeft

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

欢迎大家多提改进意见或建议，共同学习和探讨