CSS教程之网页制造教程:弹出层详解
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。破洛洛文章简介：道理很复杂.有两种完成路子:一种是经由过程元素创立和删除，一种是经由过程显现和埋没，其他的详细要做成甚么模样，就留给CSS来把持了。
实例：CSS+JS弹出层效果,兼容一切扫瞄器http://www.poluoluo.com/jzxy/201009/93884.html
在事情过程当中常常碰到做弹出的层效果，有的必要在元素右下弹出，有的必要弹出在扫瞄器正两头，有的必要弹出后再拖拽，有的必要背景要变暗，有的必要弹出的层跟从鼠标挪动……
网上此类效果实在良多，有javascript原生的，有基于框架写的,但本人很多多少时分用不到那末初级的效果，以是就把这些功效都分隔来一步一步完成。
实在道理很复杂.有两种完成路子:一种是经由过程元素创立和删除，一种是经由过程显现和埋没，其他的详细要做成甚么模样，就留给CSS来把持了。上面从最复杂的入手下手（不基于框架）
1、最复杂的弹出
用到的javascript代码以下：
functionshow(){varoShow=document.getElementById(show);oShow.style.display=block;varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}点击上面“运转”间接检察效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>最复杂的弹出层：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1pxsolid#4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}</style><scripttype="text/javascript">functionshow(){varoShow=document.getElementById(show);oShow.style.display=block;varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}</script></head><body><ahref="#">请猛击我</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
2、弹出层―到扫瞄器中心
用到的javascript代码以下：
functionshow(){variWidth=document.documentElement.clientWidth;//猎取扫瞄器宽度variHeight=document.documentElement.clientHeight;//猎取扫瞄器高度varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";//居中横坐标oShow.style.top=(iHeight-202)/2+"px";//居中纵坐标varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}点击上面“运转”间接检察效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}</script></head><body><ahref="#">请猛击我（我会弹到两头）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
3、弹出层―到扫瞄器中心―背景变暗
用到的javascript代码以下：
functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=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中varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;oShow.removeChild(oClosebtn);document.body.removeChild(bgObj);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;}点击上面“运转”间接检察效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心―背景变暗：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=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);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";functionoClose(){oShow.style.display=none;document.body.removeChild(bgObj);}varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);oClosebtn.onclick=oClose;bgObj.onclick=oClose;}</script></head><body><ahref="#">请猛击我（我会弹到两头，同时背景变暗）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
4、弹出层―到扫瞄器中心―背景变暗―撑持键盘加入
键盘事务的javascript代码以下：
functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments;//取得事务Event工具，用于兼容IE和FireFox}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}点击上面“运转”间接检察效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心―背景变暗―撑持键盘加入：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=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);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;oShow.removeChild(oClosebtn);document.body.removeChild(bgObj);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments;}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}}</script></head><body><ahref="#">请猛击我（弹出层―到扫瞄器中心―背景变暗―撑持键盘加入）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
4、弹出层―到扫瞄器中心―背景变暗―撑持键盘加入―撑持鼠标拖动
鼠标拖动的javascript代码以下：
varmoveX=0;varmoveY=0;varmoveTop=0;varmoveLeft=0;varmoveable=false;vardocMouseMoveEvent=document.onmousemove;vardocMouseUpEvent=document.onmouseup;titleBar=document.getElementById(titlebar);titleBar.onmousedown=function(){varevt=getEvent();moveable=true;moveX=evt.clientX;moveY=evt.clientY;moveTop=parseInt(oShow.style.top);moveLeft=parseInt(oShow.style.left);document.onmousemove=function(){if(moveable){varevt=getEvent();varx=moveLeft+evt.clientX-moveX;vary=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;}};}点击上面“运转”间接检察效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>5、弹出层―到扫瞄器中心―背景变暗―撑持键盘加入―撑持鼠标拖动：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;cursor:move}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=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);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;document.body.removeChild(bgObj);oShow.removeChild(oClosebtn);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments;}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}varmoveX=0;varmoveY=0;varmoveTop=0;varmoveLeft=0;varmoveable=false;vardocMouseMoveEvent=document.onmousemove;vardocMouseUpEvent=document.onmouseup;titleBar=document.getElementById(titlebar);titleBar.onmousedown=function(){varevt=getEvent();moveable=true;moveX=evt.clientX;moveY=evt.clientY;moveTop=parseInt(oShow.style.top);moveLeft=parseInt(oShow.style.left);document.onmousemove=function(){if(moveable){varevt=getEvent();varx=moveLeft+evt.clientX-moveX;vary=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;}};}}</script></head><body><ahref="#">请猛击我（弹出层―到扫瞄器中心―背景变暗―撑持键盘加入―撑持鼠标拖动）</a><divid="show"><h3id="titlebar">弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
接待人人多提改善定见或倡议，配合进修和切磋
</p>
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
页:
[1]