生活已是百般艰难,为何不努力一点。下面图老师就给大家分享网页制作教程:弹出层详解，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
【 tulaoshi.com - Web开发 】
在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动
网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。
其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）一、最简单的弹出用到的javascript代码如下：
function show(){var oShow = document.getElementById('show');oShow.style.display = 'block';var oClose = document.createElement("span");oClose.innerHTML = "×";oShow.appendChild(oClose);oClose.onclick = function(){oShow.style.display = 'none';oShow.removeChild(this);}} 点击下面运行直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
function show(){var iWidth = document.documentElement.clientWidth;//获取浏览器宽度var iHeight = document.documentElement.clientHeight;//获取浏览器高度 var oShow = document.getElementById('show');oShow.style.display = 'block';oShow.style.left = (iWidth-302)/2+"px";//居中横坐标oShow.style.top = (iHeight-202)/2+"px";//居中纵坐标var oClose = document.createElement("span");oClose.innerHTML = "×";oShow.appendChild(oClose);oClose.onclick = function(){oShow.style.display = 'none';oShow.removeChild(this);}} 点击下面运行直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
function show(){var iWidth = document.documentElement.clientWidth;var iHeight = document.documentElement.clientHeight; var bgObj = document.createElement("div");//创建背景层bgObj.setAttribute("id","bgbox");bgObj.style.width = iWidth+"px";bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";document.body.appendChild(bgObj);//将创建的层插入body中 var oShow = document.getElementById('show');oShow.style.display = 'block';oShow.style.left = (iWidth-302)/2+"px";oShow.style.top = (iHeight-202)/2+"px"; var oClosebtn = document.createElement("span");oClosebtn.innerHTML = "×";oShow.appendChild(oClosebtn); function oClose(){oShow.style.display = 'none';oShow.removeChild(oClosebtn);document.body.removeChild(bgObj);} oClosebtn.onclick = oClose;bgObj.onclick = oClose;} 点击下面运行直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
function getEvent(){return window.event || arguments.callee.caller.arguments[0];// 获得事件Event对象，用于兼容IE和FireFox} document.onkeyup = function(){var event = getEvent();if (event.keyCode == 27){oClose();}} 点击下面运行直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
var moveX = 0;var moveY = 0;var moveTop = 0;var moveLeft = 0;var moveable = false;var docMouseMoveEvent = document.onmousemove;var docMouseUpEvent = document.onmouseup;titleBar = document.getElementById('titlebar');titleBar.onmousedown = function() {var evt = getEvent();moveable = true; moveX = evt.clientX;moveY = evt.clientY;moveTop = parseInt(oShow.style.top);moveLeft = parseInt(oShow.style.left); document.onmousemove = function() {if (moveable) {var evt = getEvent();var x = moveLeft + evt.clientX - moveX;var y = moveTop + evt.clientY - moveY;if ( x 0 &&( x + 302 iWidth) && y 0 && (y + 202 iHeight) ) {oShow.style.left = x + "px";oShow.style.top = y + "px";}}};document.onmouseup = function () { if (moveable) { document.onmousemove = docMouseMoveEvent;document.onmouseup = docMouseUpEvent;moveable = false; moveX = 0;moveY = 0;moveTop = 0;moveLeft = 0;} };} 点击下面运行直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
欢迎大家多提改进意见或建议，共同学习和探讨
来源:http://www.tulaoshi.com/n/20160220/1632009.html
看过《网页制作教程:弹出层详解》的人还看了以下文章 更多>>
