点击链接居中弹出层代码，网页可关闭的层效果

发布时间：2018-08-15 22:09:24 所属栏目：聚会来源：站长网

导读：一款基于 Java Script的网页弹出层代码，点击链接后，在网页居中弹出层，点击关闭或层以外的部分都可关闭这个层，此类的效果还有很多，您可以通过弹出层这个标签来索引一下。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://

　　一款基于JavaScript的网页弹出层代码，点击链接后，在网页居中弹出层，点击“关闭”或层以外的部分都可关闭这个层，此类的效果还有很多，您可以通过“弹出层”这个标签来索引一下。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击文字弹出层</title> <style type="text/css">  </style> </head> <body>  <div id="pop" class="pop" style="display:none"> <div class="pop_head"><a href="javascript:void(0);" onclick="hide()">关闭</a></div> <div class="pop_body">谢谢光临……</div> </div>  <a href="javascript:void(0);" onclick="show();">弹出按钮</a> <script type="text/javascript"> var EX = { addEvent:function(k,v){ var me = this; if (me.addEventListener) me.addEventListener(k, v, false); else if(me.attachEvent) me.attachEvent("on" + k, v); else me["on" + k] = v; }, removeEvent:function(k,v){ var me = this; if (me.removeEventListener) me.removeEventListener(k, v, false); else if (me.detachEvent) me.detachEvent("on" + k, v); else me["on" + k] = null; }, stop:function(evt){ evt = evt || window.event; evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true; } }; document.getElementById('pop').onclick = EX.stop; var url = '#'; function show(){ var o = document.getElementById('pop'); o.style.display = ""; setTimeout(function(){EX.addEvent.call(document,'click',hide);}); } function hide(){ var o = document.getElementById('pop'); o.style.display = "none"; EX.removeEvent.call(document,'click',hide); } </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!