首页 > 代码库 > 自定义弹出层
自定义弹出层
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery弹出层效果</title><meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /><meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" /><style>.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}.white_content {display: none;position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border: 16px solid lightblue;background-color: white;z-index:1002;overflow: auto;}.white_content_small {display: none;position: absolute;top: 20%;left: 30%;width: 40%;height: 50%;border: 16px solid lightblue;background-color: white;z-index:1002;overflow: auto;}</style><script type="text/javascript">//弹出隐藏层function ShowDiv(show_div,bg_div){document.getElementById(show_div).style.display=‘block‘;document.getElementById(bg_div).style.display=‘block‘ ;var bgdiv = document.getElementById(bg_div);bgdiv.style.width = document.body.scrollWidth;// bgdiv.style.height = $(document).height();$("#"+bg_div).height($(document).height());};//关闭弹出层function CloseDiv(show_div,bg_div){document.getElementById(show_div).style.display=‘none‘;document.getElementById(bg_div).style.display=‘none‘;};</script></head><body><input id="Button1" type="button" value=http://www.mamicode.com/"点击弹出层" onclick="ShowDiv(‘MyDiv‘,‘fade‘)" /><!--弹出层时背景层DIV--><div id="fade" class="black_overlay"></div><div id="MyDiv" class="white_content"><div style="text-align: right; cursor: default; height: 40px;"><span style="font-size: 16px;" onclick="CloseDiv(‘MyDiv‘,‘fade‘)">关闭</span></body></html>自定义弹出层
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。