本章节介绍一下如何实现点击按钮能够弹出一个弹出层,并且这个弹出层是全屏的。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <script type="text/javascript"> function show(){ var win=document.getElementById("win"); win.style.display="block"; win.style.position="absolute"; win.style.top="50%"; win.style.left="50%"; win.style.marginTop="-75px"; win.style.marginLeft="-150px"; win.style.background="cyan"; win.style.width="300px"; win.style.height="200px"; win.style.zIndex="1000"; var mark = document.createElement("div"); mark.setAttribute("id","mark"); mark.style.background="#000"; mark.style.width="100%"; mark.style.height="100%"; mark.style.position="absolute"; mark.style.top="0"; mark.style.left="0"; mark.style.zIndex="500"; mark.style.opacity="0.3"; mark.style.filter="Alpha(opacity=30)"; document.body.appendChild(mark); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ show(); } } </script> </head> <body> <center> <div><input type="button" value="查看效果" id="bt" /></div> <div id="win" style="display:none;"></div> </center> </body> </html>
上面的代码中,点击按钮可以弹出一个全屏的遮罩层效果,但是它并不是完美的。
因为当玩野的内容超出一屏的高度的时候,就会出现滚动条,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { margin:0px; padding:0px; } #antzone { margin:0px auto; width:20px; height:1200px; background:#ccc; } </style> <script type="text/javascript"> function show(){ var win=document.getElementById("win"); win.style.display="block"; win.style.position="absolute"; win.style.top="50%"; win.style.left="50%"; win.style.marginTop="-75px"; win.style.marginLeft="-150px"; win.style.background="cyan"; win.style.width="300px"; win.style.height="200px"; win.style.zIndex="1000"; var mark = document.createElement("div"); mark.setAttribute("id","mark"); mark.style.background="#000"; mark.style.width="100%"; mark.style.height="100%"; mark.style.position="absolute"; mark.style.top="0"; mark.style.left="0"; mark.style.zIndex="500"; mark.style.opacity="0.3"; mark.style.filter="Alpha(opacity=30)"; document.body.appendChild(mark); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ show(); } } </script> </head> <body> <center> <div><input type="button" value="查看效果" id="bt" /></div> <div id="win" style="display:none;"></div> </center> <div id="antzone"></div> </body> </html>
但是如果高度超过一屏的话,就会出现滚动条,下拉滚动条的话,那就有点惨不忍睹了。
上面的问题还是很好解决的,只要给body添加一个overflow:hidden即可:
document.body.style.overflow = "hidden";
但是上面的代码还不够完美,因为有可能我们弹出的那个窗口高度是很大的,看如下代码实例:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { margin:0px; padding:0px; } #antzone { margin:0px auto; width:20px; height:1200px; background:#ccc; } </style> <script type="text/javascript"> function show(){ var win=document.getElementById("win"); win.style.display="block"; win.style.position="absolute"; win.style.top="50%"; win.style.left="50%"; win.style.marginTop="-75px"; win.style.marginLeft="-150px"; win.style.background="cyan"; win.style.width="300px"; win.style.height="800px"; win.style.zIndex="1000"; var mark = document.createElement("div"); mark.setAttribute("id","mark"); mark.style.background="#000"; mark.style.width="100%"; mark.style.height="100%"; mark.style.position="absolute"; mark.style.top="0"; mark.style.left="0"; mark.style.zIndex="500"; mark.style.opacity="0.3"; mark.style.filter="Alpha(opacity=30)"; document.body.appendChild(mark); document.body.style.overflow = "hidden"; } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ show(); } } </script> </head> <body> <center> <div><input type="button" value="查看效果" id="bt" /></div> <div id="win" style="display:none;"></div> </center> <div id="antzone"></div> </body> </html>
上面的代码中,弹出窗口的高度是800px,但是由于设置了body的overflow:hidden,所以没法显示完整。
在这种情况下,我们也需要计算遮罩层的高度了,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { margin:0px; padding:0px; } #antzone { margin:0px auto; width:20px; height:1200px; background:#ccc; } </style> <script type="text/javascript"> function show(){ var win=document.getElementById("win"); win.style.display="block"; win.style.position="absolute"; win.style.top="50%"; win.style.left="50%"; win.style.marginTop="-75px"; win.style.marginLeft="-150px"; win.style.background="cyan"; win.style.width="300px"; win.style.height="800px"; win.style.zIndex="1000"; var mark = document.createElement("div"); mark.setAttribute("id","mark"); mark.style.background="#000"; mark.style.width="100%"; mark.style.height=document.body.offsetHeight+"px"; mark.style.position="absolute"; mark.style.top="0"; mark.style.left="0"; mark.style.zIndex="500"; mark.style.opacity="0.3"; mark.style.filter="Alpha(opacity=30)"; document.body.appendChild(mark); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ show(); } } </script> </head> <body> <center> <div><input type="button" value="查看效果" id="bt" /></div> <div id="win" style="display:none;"></div> </center> <div id="antzone"></div> </body> </html>
上面的核心代码如下:
mark.style.height=document.body.offsetHeight+"px";
本文地址: http://www.zzsi.net/code/web/98277.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。