js弹出层与遮罩层(20190223053800)
js弹层
主调函数参数说明：Dialog.open({ID,Title,URL,InnerHtml,InvokeElementId,Width,Height,Top,Left,Drag,OKEv ent,ShowButtonRow,MessageTitle,Message,AutoClose,OnLoad})∙ID：窗口id号，可省略。
每个窗口的id必须是唯一的不能重复。
∙Title：窗口标题。
如不写此项默认值为""。
∙URL：窗口内容页地址，或使用相对路径或绝对路径，注意如果使用形式的绝对地址，则http://不能省略。
∙InnerHtml：窗口内容html代码，用于直接输出html内容，注意不要让生成的内容因为不适当的宽度或定位方式而破坏了Dialog的外观。
∙InvokeElementId：本页面内隐藏的元素的id，用于显示页面内隐藏的元素中的html 内容，注意不要让内容因为不适当的宽度或定位方式而破坏了Dialog的外观。
∙Width：窗口宽度（dialog内容区宽度），值为数值型，默认值为窗口可见宽的40%。
∙Height：窗口高度（dialog内容区高度），值为数值型，默认值为窗口可见宽的20%。
∙Left：窗口距浏览器左边距离，值为数值型或字符串型（当使用百分比时为字符串型），如Left:"0%",Top:"0%"为左上，Left:"50%",Top:"50%"为居中，Left:"100%",Top:"100%"为右下。
∙Top：窗口距浏览器顶端距离，值为数值型或字符串型（百分比）。
∙Drag：是否允许拖动窗口，值为布尔型(true|false)，默认值为true，注意需要页面引用了Drag.js。
∙OKEvent：点击确定按钮后执行的函数。
∙CancelEvent：点击取消按钮或点击关闭按钮后执行的函数，默认为关闭本Dialog。
js实现弹窗效果
js实现弹窗效果本⽂实例为⼤家分享了js实现弹窗效果的具体代码，供⼤家参考，具体内容如下思路：1.创建⼀个按钮，点击弹出弹窗2.建⽴⼀个弹窗页⾯固定定位默认隐藏3.将弹窗内容放在弹窗页⾯的中间4.js将事件绑定按钮，点击后让弹窗页⾯显⽰5.js事件绑定span标签，点击后让弹窗页⾯消失代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>弹窗</title><link href="../css/弹窗.css" type="text/css" rel="stylesheet"></head><body><!--打开弹窗按钮--><button id="btn">打开弹窗</button><!--弹窗--><div id="myModal"><!--弹窗头部--><div class="modal"><div class="modal-header"><p>危险警告</p><span class="close">×</span></div><!--弹窗⽂本--><div class="modal-content"><p>您将进⼊⼀个不安全的页⾯</p></div><!--弹窗底部--><div class="modal-footer"></div></div><script src="../js/弹窗.js"></script></body></html>CSS:#myModal{display: none;position: fixed;z-index:1;left:0;top:0;width: 100%;height:100%;overflow: auto;background:rgba(0,0,0,0.5);}#myModal .modal{width: 500px;height:300px;position: relative;top:50%;left:50%;margin-top: -150px;margin-left: -250px;animation:animate 1s;}.modal .modal-header{height:50px;background:white;color: #000;line-height:50px;border-bottom: 1px solid #000000;}.modal .modal-header p{display: inline-block;margin:0;position: absolute;left: 20px;}.modal .modal-header .close{position: absolute;right:20px;font-size: 20px;cursor:pointer;}.modal .modal-content{background: white;height:200px;text-align: center;line-height: 200px;}.modal .modal-content p{margin:0;}.modal .modal-footer{position: relative;height:50px;background: white;}/*添加动画*/@keyframes animate{from{top:0;opacity:0}to{top:50%;opacity:1}}js：window.onload=function () {//获取弹窗按钮var btn=document.getElementById("btn");var close=document.getElementsByClassName("close")[0];var myModal=document.getElementById("myModal");//按钮绑定事件btn.onclick=function () {//获取弹窗myModal.style.display="block";}close.onclick=function () {myModal.style.display="none";}//⽤户点击其他地⽅关闭弹窗window.onclick=function (event) {if(event.target ==myModal){myModal.style.display="none";}}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
js弹出窗口总结6种弹窗方法
js弹出窗口总结6种弹窗方法注://关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<scriptlanguage=javascript>window.close();</script>");//关闭,父窗口和子窗口都不弹出对话框,直接关闭this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.close();}");this.Response.Write("</script>");//弹出窗口刷新当前页面width=200 height=200菜单。
菜单栏,工具条,地址栏,状态栏全没有this.Response.Write("<scriptlanguage=javascript>window.open('rows.aspx','newwindow','width=200,he ight=200')</script>");//弹出窗口刷新当前页面this.Response.Write("<scriptlanguage=javascript>window.open('rows.aspx')</script>");this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</ script>");//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)this.Response.Write(" <script language=javascript>alert('注册成功'); window.window.location.href='WebForm2.aspx';</script> ");//关闭当前子窗口,刷新父窗口this.Response.Write("<script>window.opener.location.href=window.opene r.location.href;window.close();</script>");this.Response.Write("<script>window.opener.location.replace(window.op ener.document.referrer);window.close();</script>");//子窗口刷新父窗口this.Response.Write("<script>window.opener.location.href=window.opene r.location.href;</script>");this.Response.Write("<script>window.opener.location.href='WebForm1.as px';</script>");//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)this.Response.Write("<script language='javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>");//弹出提示窗口,确定后,刷新父窗口this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>" );//弹出相同的一页<INPUT type="button" value="Button"onclick="javascript:window.open(window.location.href)">//Response.Write("parent.mainFrameBottom.location.href='yourwebform.asp x?temp=" +str+"';");<SCRIPT LANGUAGE="javascript"><!--window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行--></SCRIPT>参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；'page.html' 弹出窗口的文件名；'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。
js实现遮罩层弹出框的方法
js实现遮罩层弹出框的⽅法本⽂实例讲述了js实现遮罩层弹出框的⽅法。
分享给⼤家供⼤家参考。
具体分析如下：昨天公司⽹站需要弹窗提⽰⼀些信息,要我在把弹窗的js代码和弹窗窗⼝html写在⼀起哪⾥需要就调⽤不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊：复制代码代码如下:<style>#H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}#H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}#H-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}#H-dialog #msgCont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;}</style><div id="H-dialog"><a class="close" onclick="popupClose(this)">×</a><div class="title">提⽰</div><div id="msgCont">内容</div></div><script type="text/javascript">//锁定背景屏幕function lockScreen() {var clientH = document.body.offsetHeight; //body⾼度var clientW = document.body.offsetWidth; //body宽度var docH = document.body.scrollHeight; //浏览器⾼度var docW = document.body.scrollWidth; //浏览器宽度var bgW = clientW > docW ? clientW : docW; //取有效宽var bgH = clientH > docH ? clientH : docH; //取有效⾼var blackBg = document.createElement("div");blackBg.id = "blackBg";blackBg.style.position = "absolute";blackBg.style.zIndex = "99999";blackBg.style.top = "0";blackBg.style.left = "0";blackBg.style.width = bgW+"px";blackBg.style.height = bgH+"px";blackBg.style.opacity = "0.4";blackBg.style.backgroundColor = "#333";document.body.appendChild(blackBg);}//关闭按钮事件function popupClose(el) {var blackBg = document.getElementById("blackBg");blackBg && document.body.removeChild(blackBg);el.parentNode.style.display = "none";}//⾃动关闭function autoClose(id) {id = id || "H-dialog";var blackBg = document.getElementById("blackBg");var objDiv = document.getElementById(id);setTimeout(function(){blackBg && document.body.removeChild(blackBg);objDiv.style.display = "none";},2000);}/***功能 : 弹窗信息*参数1 : 提⽰信息内容*参数2 : 提⽰信息状态默认0 为提⽰信息,1为成功信息*参数3 : 弹窗div的id,默认"H-dialog"*参数4 : 弹窗内容的id,默认"msgCont"**/function showMsg(msg) {msg = msg || "请重新操作";var status = arguments[1] || 0,popupId = arguments[2] || "H-dialog",contentId = arguments[3] || "msgCont";lockScreen();//屏幕实际⾼宽var pageWidth = window.innerWidth;var pageHeight = window.innerHeight;if (typeof pageWidth != "number") {if (patMode == "CSS1Compat") {pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;} else {pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;}}//滚动条⾼宽var scrollLeft = window.document.documentElement.scrollLeft;var scrollTop = 0;if (typeof window.pageYOffset != 'undefined') {scrollTop = window.pageYOffset;} else if (typeof patMode != 'undefined' &&patMode != 'BackCompat') {scrollTop = window.document.documentElement.scrollTop;} else if (typeof window.document.body != 'undefined') {scrollTop = window.document.body.scrollTop;}var div_X = (pageWidth - 400) / 2 + scrollLeft;var div_Y = (pageHeight - 200) / 2 + scrollTop;var objDiv = document.getElementById(popupId);if (status) {document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) no-repeat 20px 50%";}document.getElementById(contentId).innerHTML = msg;objDiv.style.display = "block";objDiv.style.left = div_X + "px";objDiv.style.top = div_Y + "px";autoClose(popupId);}</script>希望本⽂所述对⼤家的javascript程序设计有所帮助。
javascript弹出层窗体
<html><head><title>_xWin</title><script language=JScript><!--//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover='orange',normal='slategray';//color;var index=10000;//z-index;var xx;//开始拖动;function startDrag(obj){if(event.button==1){//锁定标题栏;obj.setCapture();//定义对象;var win = obj.parentNode;var sha = win.nextSibling;//记录鼠标和层位置;x0 = event.clientX;y0 = event.clientY;x1 = parseInt(win.style.left);y1 = parseInt(win.style.top);//记录颜色;normal = obj.style.backgroundColor;//改变风格;obj.style.backgroundColor = hover;win.style.borderColor = hover;obj.nextSibling.style.color = hover;sha.style.left = x1 + offx;sha.style.top = y1 + offy;moveable = true;}}//拖动;function drag(obj){if(moveable){var win = obj.parentNode;var sha = win.nextSibling;win.style.left = x1 + event.clientX - x0;sha.style.left = parseInt(win.style.left) + offx;if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){win.style.top = y1 + event.clientY - y0;sha.style.top = parseInt(win.style.top) + offy;}}}//停止拖动;function stopDrag(obj){if(moveable){var win = obj.parentNode;var sha = win.nextSibling;var msg = obj.nextSibling;win.style.borderColor = normal;obj.style.backgroundColor = normal;msg.style.color = normal;sha.style.left = obj.parentNode.style.left;sha.style.top = obj.parentNode.style.top;obj.releaseCapture();moveable = false;}}//获得焦点;function getFocus(obj){if(obj.style.zIndex!=index){index = index + 2;var idx = index;obj.style.zIndex=idx;obj.nextSibling.style.zIndex=idx-1;}}//最小化;function min(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;var tit = obj.parentNode;var msg = tit.nextSibling;var flg = msg.style.display=="none";if(flg){win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;sha.style.height = win.style.height;msg.style.display = "block";obj.innerHTML = "0";}else{win.style.height = parseInt(tit.style.height) + 2*2;sha.style.height = win.style.height;obj.innerHTML = "2";msg.style.display = "none";}}//关闭;function cls(obj){var win = obj.parentNode.parentNode.parentNode;//var sha = win.nextSibling;win.style.visibility = "hidden";//sha.style.visibility = "hidden";}//显示/隐藏;function ShowHide(){if (xx!=null)if (xx.style.visibility == "hidden")xx.style.visibility = "visible";else if (xx.style.visibility == "visible")xx.style.visibility = "hidden";}//创建一个对象;function xWin(id,w,h,l,t,tit,msg){index = index+2;this.id = id;this.width = w;this.height = h;this.left = l;this.top = t;this.zIndex = index;this.title = tit;this.message = msg;this.obj = null;this.bulid = bulid;this.bulid();xx = document.getElementById('allx');xx.style.visibility = "visible";}//初始化;function bulid(){var str = ""+ "<div id='allx'><div id='xMsg'" + this.id + " "+ "style='"+ "z-index:" + this.zIndex + ";"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "left:" + this.left + ";"+ "top:" + this.top + ";"+ "background-color:" + normal + ";"+ "color:" + normal + ";"+ "font-size:11px;"+ "font-family:Verdana;"+ "position:absolute;"+ "cursor:default;"+ "border:2px solid " + normal + ";"+ "' "+ "onmousedown='getFocus(this)'>"+ "<div "+ "style='"+ "background-color:" + normal + ";"+ "width:" + (this.width-2*2) + ";"+ "height:20;"+ "color:white;"+ "' "+ "onmousedown='startDrag(this)' "+ "onmouseup='stopDrag(this)' "+ "onmousemove='drag(this)' "+ "ondblclick='min(this.childNodes[1])'"+ ">"+ "<span style='width:" + (this.width-2*14-4) + ";padding-left:3px;'>" + this.title + "</span>"+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;'onclick='min(this)'>0</span>"+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;'onclick='cls(this)'>r</span>"+ "</div>"+ "<div style='"+ "width:100%;"+ "height:" + (this.height-20-4) + ";"+ "background-color:white;"+ "line-height:14px;"+ "word-break:break-all;"+ "padding:3px;"+ "'>" + this.message + "</div>"+ "</div>"+ "<div id='xshadow' style='"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "top:" + this.top + ";"+ "left:" + this.left + ";"+ "z-index:" + (this.zIndex-1) + ";"+ "position:absolute;"+ "background-color:black;"+ "filter:alpha(opacity=40);"+ "'>by wildwind</div></div>";document.getElementById('msgbox').innerHTML = str;}//--></script><script language='JScript'><!--function initialize(){var a = new xWin("1",460,400,200,200,"效果怎么样！","<br><h1></h1>");}window.onload = initialize;//--></script></head><body onselectstart='return false' oncontextmenu='return false' scroll='no'><DIV class=textSheetstyle="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid"><table width="242" height="160" border="1" ID="Table2"><td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="ShowHide()">显示隐藏</td></table></DIV><div id="msgbox"></div></body></html>。
javascript实现弹出层效果
javascript实现弹出层效果弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由⽤户触发的显⽰提⽰信息的弹出⾯板；但是弹窗只是显⽰⼀些信息，没有太多的复杂的交互事件；⽽弹层类似⼀个整个页⾯，可以实现页⾯的所有功能；现在前端弹层使⽤的很频繁，如⽀付宝⽀付弹层等…所以掌握弹层是⼀个很重要的技能。
如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层；html弹层结构：<main class="main"><header class="head flex-center gray-theme">This is Header</header><section class="body flex-center"><ul class="btn-list flex-center btn-group"><li class="btn-box"><span class="btn inline-flex-center" data-position="top">上弹层</span></li><li class="btn-box"><span class="btn inline-flex-center" data-position="right">右弹层</span></li> <li class="btn-box"><span class="btn inline-flex-center" data-position="bottom">下弹层</span></li> <li class="btn-box"><span class="btn inline-flex-center" data-position="left">左弹层</span></li></ul></section><footer class="foot flex-center gray-theme">This is Footer</footer><!-- popup --><section class="popup flex-center hide hidden"><section class="popup-bg"></section><section class="popup-wrapper"><header class="title head flex-center"></header><section class="container body flex-center"></section><footer class="btn-wrapper foot flex-center"><ul class="btn-list flex-center"><li class="btn-box"><span class="btn cancel inline-flex-center">取消</span></li><li class="btn-box"><span class="btn confirm inline-flex-center">确认</span></li></ul></footer></section></section></main>css代码：-webkit-transform: translate3d(0, -400%, 0); -moz-transform: translate3d(0, -400%, 0); -ms-transform: translate3d(0, -400%, 0);-o-transform: translate3d(0, -400%, 0);transform: translate3d(0, -400%, 0);}100%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}@keyframes slideTop{@include slide-top;}@-webkit-keyframes slideTop{@include slide-top;}@mixin slide-top-hide{0%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}100%{-webkit-transform: translate3d(0, -400%, 0); -moz-transform: translate3d(0, -400%, 0); -ms-transform: translate3d(0, -400%, 0);-o-transform: translate3d(0, -400%, 0);transform: translate3d(0, -400%, 0);}}@keyframes slideTopHide{@include slide-top-hide;}@-webkit-keyframes slideTopHide{@include slide-top-hide;}@mixin slide-right{0%{-webkit-transform: translate3d(400%, 0, 0); -moz-transform: translate3d(400%, 0, 0); -ms-transform: translate3d(400%, 0, 0);-o-transform: translate3d(400%, 0, 0);transform: translate3d(400%, 0, 0);}100%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}@keyframes slideRight{@include slide-right;}@-webkit-keyframes slideRight{@include slide-right;}@mixin slide-right-hide{0%{transform: translate3d(0, 0, 0);}100%{-webkit-transform: translate3d(400%, 0, 0); -moz-transform: translate3d(400%, 0, 0); -ms-transform: translate3d(400%, 0, 0);-o-transform: translate3d(400%, 0, 0);transform: translate3d(400%, 0, 0);}}@keyframes slideRightHide{@include slide-right-hide;}@-webkit-keyframes slideRightHide{@include slide-right-hide;}@mixin slide-bottom{0%{-webkit-transform: translate3d(0, 400%, 0); -moz-transform: translate3d(0, 400%, 0); -ms-transform: translate3d(0, 400%, 0);-o-transform: translate3d(0, 400%, 0);transform: translate3d(0, 400%, 0);}100%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}@keyframes slideBottom{@include slide-bottom;}@-webkit-keyframes slideBottom{@include slide-bottom;}@mixin slide-bottom-hide{0%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}100%{-webkit-transform: translate3d(0, 400%, 0); -moz-transform: translate3d(0, 400%, 0); -ms-transform: translate3d(0, 400%, 0);-o-transform: translate3d(0, 400%, 0);transform: translate3d(0, 400%, 0);}}@keyframes slideBottomHide{@include slide-bottom-hide;}@-webkit-keyframes slideBottomHide{@include slide-bottom-hide;}@mixin slide-left{0%{-webkit-transform: translate3d(-400%, 0, 0);}100%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}@keyframes slideLeft{@include slide-left;}@-webkit-keyframes slideLeft{@include slide-left;}@mixin slide-left-hide{0%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}100%{-webkit-transform: translate3d(-400%, 0, 0); -moz-transform: translate3d(-400%, 0, 0); -ms-transform: translate3d(-400%, 0, 0);-o-transform: translate3d(-400%, 0, 0);transform: translate3d(-400%, 0, 0);}}@keyframes slideLeftHide{@include slide-left-hide;}@-webkit-keyframes slideLeftHide{@include slide-left-hide;}@mixin popup-hide{0%{z-index: 99999;opacity: 1;}100%{z-index: -1;opacity: 0;}}@keyframes popupHide{@include popup-hide;}@-webkit-keyframes popupHide{@include popup-hide;}.popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;opacity: 0;.popup-bg{position: absolute;left: 0;background: rgba(0,0,0, 0.5);width: 100%;height: 100%;z-index: 1;}.popup-wrapper{position: relative;width: 70%;height: 70%;margin: auto;background: #fff;border-radius: 5%;z-index: 100;}&.hidden{display: none;}&.show{z-index: 99999;opacity: 1;&.top{.popup-wrapper{-webkit-animation: slideTop 0.6s linear forwards;-moz-animation: slideTop 0.6s linear forwards;-ms-animation: slideTop 0.6s linear forwards;-o-animation: slideTop 0.6s linear forwards;animation: slideTop 0.6s linear forwards;}}&.right{.popup-wrapper{-webkit-animation: slideRight 0.6s linear forwards; -moz-animation: slideRight 0.6s linear forwards;-ms-animation: slideRight 0.6s linear forwards;-o-animation: slideRight 0.6s linear forwards;animation: slideRight 0.6s linear forwards;}}&.bottom{.popup-wrapper{-webkit-animation: slideBottom 0.6s linear forwards; -moz-animation: slideBottom 0.6s linear forwards; -ms-animation: slideBottom 0.6s linear forwards;-o-animation: slideBottom 0.6s linear forwards;animation: slideBottom 0.6s linear forwards;}}&.left{.popup-wrapper{-webkit-animation: slideLeft 0.6s linear forwards;-moz-animation: slideLeft 0.6s linear forwards;-ms-animation: slideLeft 0.6s linear forwards;-o-animation: slideLeft 0.6s linear forwards;animation: slideLeft 0.6s linear forwards;}}}&.hide{-webkit-animation: popupHide 0.7s linear forwards; -moz-animation: popupHide 0.7s linear forwards;-ms-animation: popupHide 0.7s linear forwards;-o-animation: popupHide 0.7s linear forwards;animation: popupHide 0.7s linear forwards;&.top{.popup-wrapper{-webkit-animation: slideTopHide 0.6s linear forwards; -moz-animation: slideTopHide 0.6s linear forwards; -ms-animation: slideTopHide 0.6s linear forwards;-o-animation: slideTopHide 0.6s linear forwards;animation: slideTopHide 0.6s linear forwards;}}&.right{.popup-wrapper{-moz-animation: slideRightHide 0.6s linear forwards;-ms-animation: slideRightHide 0.6s linear forwards;-o-animation: slideRightHide 0.6s linear forwards;animation: slideRightHide 0.6s linear forwards;}}&.bottom{.popup-wrapper{-webkit-animation: slideBottomHide 0.6s linear forwards; -moz-animation: slideBottomHide 0.6s linear forwards; -ms-animation: slideBottomHide 0.6s linear forwards;-o-animation: slideBottomHide 0.6s linear forwards;animation: slideBottomHide 0.6s linear forwards;}}&.left{.popup-wrapper{-webkit-animation: slideLeftHide 0.6s linear forwards;-moz-animation: slideLeftHide 0.6s linear forwards;-ms-animation: slideLeftHide 0.6s linear forwards;-o-animation: slideLeftHide 0.6s linear forwards;animation: slideLeftHide 0.6s linear forwards;}}}}html,body,.main{width: 100%;height: 100%;overflow: hidden;}.head,.body,.foot{width: 100%;}.head,.foot{height: 15%;}.body{height: 70%;}.gray-theme{background: #333;color: #fff;}.btn-list{width: 40%;min-width: 270px;height: 38px;.btn-box{width: 22%;height: 100%;padding-right: 4%;&:last-child{padding-right: 0;}}}.btn{line-height: 1em;width: 100%;height: 100%;border-radius: 10%;background: green;color: #ff0;text-align: center;vertical-align: middle;cursor: pointer;}js代码：class PopupComponent {constructor() {this.btnGroupEl = document.getElementsByClassName("btn-group")[0];this.popupEl = document.getElementsByClassName("popup")[0];this.popupBGEl = this.popupEl.querySelector(".popup-bg");this.popupTitleEl = this.popupEl.querySelector(".popup-wrapper .title");this.popupBodyEl = this.popupEl.querySelector(".popup-wrapper .body");this.cancelBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.cancel");this.confirmBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.confirm");this.popupElClasslist = this.popupEl.classList;this.LEGVALS = ["top", "right", "bottom", "left"];this.detaultPosition = "";this.position = "";this.SHOWCLASSNAME = "show";this.HIDECLASSNAME = "hide";this.HIDDENCLASSNAME = "hidden";}/*** 给弹窗的标题和主体添加内容* @param Object contentObj 传递的对象*/setContentForPopup(contentObj = {'title':'title', 'body': 'body'}) {try{if (!TB.isObject(contentObj)) {throw new Error("The param of setContentForPopup function error!");}let value;for (let prop in contentObj) {if (!contentObj.hasOwnProperty(prop)) {continue;}if (prop === 'title') {value = contentObj[prop];this.popupTitleEl.innerText = value;}if (prop === 'body') {value = contentObj[prop];this.popupBodyEl.innerText = value;}}} catch (e) {console.log("Popup element is not exist!");console.error(e);}}/*** 删除弹窗的类名* @return void*/deletePopupPreviousClassName() {if (this.HIDDENCLASSNAME && KB.checkType.isString(this.HIDDENCLASSNAME)) { this.popupElClasslist.remove(this.HIDDENCLASSNAME);}if (this.detaultPosition && KB.checkType.isString(this.detaultPosition)) {this.popupElClasslist.remove(this.detaultPosition);}this.detaultPosition = this.position;}/*** @return void*/popupHide() {if (this.popupElClasslist.contains(this.SHOWCLASSNAME)) {this.popupElClasslist.remove(this.SHOWCLASSNAME);this.popupElClasslist.add(this.HIDECLASSNAME);}}/*** 弹窗显⽰* @return void*/popupShow() {this.deletePopupPreviousClassName();if (this.popupElClasslist.contains(this.HIDECLASSNAME)) {this.popupElClasslist.remove(this.HIDECLASSNAME);this.popupElClasslist.add(this.SHOWCLASSNAME);this.popupElClasslist.add(this.position);}this.setContentForPopup({'title': this.position + ' title','body': this.position + ' body',});}/*** 按钮容器的点击事件* @param Object e 点击的事件event* @return void*/btnGroupClickEvent(e) {let btnEl = e.target || e.srcElement;if (!TB.isElement(btnEl)) {throw new Error("Get btn element error!");}this.position = btnEl.getAttribute("data-position");if (!TB.isString(this.position) || (this.LEGVALS.indexOf(this.position) < 0)) { throw new Error("Can not get position value from btn element!");}this.popupShow();}/*** 给DOM元素添加点击事件* @param Object elem 添加点击事件的dom元素* @param Function fn 触发事件调⽤的回调函数*/addClickEventFormElem(elem, fn) {TB.addHandler.call(this, elem, 'click', fn, false);}/*** 初始化函数* @return void*/init() {this.addClickEventFormElem(this.btnGroupEl, this.btnGroupClickEvent); this.addClickEventFormElem(this.cancelBtnEl, this.popupHide);this.addClickEventFormElem(this.confirmBtnEl, this.popupHide);}}let popupComponent = new PopupComponent();popupComponent.init();TB.addHandler：/** 给DOM元素添加事件* @param void* @return callback function 回调函数* */function addHandler(elem, type, callback, useCapture) {var checkType = checkArgumentType(),_document = document,_callback = checkType.isFunction(callback)? callback:function(){},_self = this;if (!checkType.isElement(elem) || !checkType.isString(type)) {return;}if (_document.addEventListener) {addHandler = function(elem, type, callback, useCapture) {elem.addEventListener(type, function(e) {_callback.call(_self, e);}, useCapture || false);}} else if (_document.attachEvent) {addHandler = function(elem, type, callback, useCapture) {elem.attachEvent("on" + type, function(e){_callback.apply(_self, [e]);});}} else {addHandler = function(elem, type, callback, useCapture) {elem["on" + type] = function(e) {_callback.call(_self, e);};}}addHandler(elem, type, callback, useCapture);}⾸先说⼀下弹窗的DOM结构：在外层⼀般是绝对定位，并使⽤flex布局使得内容居中；它的直接⼦元素⼀般有两个，⿊⾊背景层和内容容器；如图所⽰：样式的动画相信前端的同学⼀般都知道怎么做；但是有⼀点要注意，不要试图使⽤display来实现动画；我使⽤的解决的办法是⾸先动画的显⽰隐藏使⽤的z-index和opacity；但是这样存在开始时，弹窗会缓缓隐藏，那么我们可以⽤⼀个类表⽰display: none;点击显⽰弹层时，移除该类即可；对于js没什么好说的，⽆⾮是操作类名；但是有⼀点要注意事件注册和this的指向;注意我的addHandler函数，该函数只会判断⼀次浏览器的环境，不需要反复的判断浏览器的环境；在btnGroupClickEvent函数中this是指向PopupComponent类，⽽不是事件的event;所以addHandler函数中⾸先保存this的指向，然后使⽤call或者apply改变this的指向以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JS实现弹出层效果
JS实现弹出层效果很多时候我们想去某某⽹站⼲点什么的时候，就会让我们先注册登录后才可以访问内容，⽽现在很多⽹站注册登录的时候都会有⼀种遮罩层的效果，就是背景是带有透明度的⿊⾊遮罩，盖满整个⽹站，然后登录框弹出固定在屏幕的居中位置。
那么，今天就练练这个实⽤⽽简单的效果吧。
PS：这个是我学习后练习的demo！⾸先，需要有⼀个按钮来模拟登录：<button id="btnLogin"class="login-btn">登录</button>然后呢，我们想通过点击这个按钮实现这样⼀个效果：从上⾯这张图⽚，我们可以看到，灰⾊背景就是遮罩层，⽽浅蓝⾊的区域就是登陆框位置所在了。
OK，下⾯先看⼀下HTML结构和css样式：<div id="mask"></div> //遮罩层<div id="login"> //登陆框包裹层<div id="loginCon"> //表单内容<div id="close">点击关闭</div> //关闭按钮我是登录框哟！</div></div>这⾥只是将HTML结构拿出来讲⼀下，但是下⾯我们是通过JS来创建它们的，所以这⾥只是为了⽅便我们理解，并不需要放在html⽂件⾥。
CSS样式：#close{background:url(img/close.png) no-repeat;width:30px;height:30px;cursor:pointer;position:absolute;right:5px;top:5px;text-indent:-999em;}#mask{background-color:#ccc;opacity:0.7;filter: alpha(opacity=70);position:absolute;left:0;top:0;z-index:1000;}#login{position:fixed;z-index:1001;}.loginCon{position:relative;width:670px;height:380px;background:lightblue;border:3px solid #333;text-align: center;}css样式中需要注意⼀下z-index属性，因为我们需要让遮罩层盖住除了登录框之外所有的页⾯内容，所以，需要确保登录框的层次最⾼，遮罩层次之，所以⼀般将这两个的z-index属性值设置为⽐较⾼的数值，但遮罩层要⽐登陆框少⼀层。
js控制div弹出层实现方法
js控制div弹出层实现⽅法本⽂实例讲述了js控制div弹出层实现⽅法。
分享给⼤家供⼤家参考。
具体分析如下：这是个功能很好，且容易调⽤和控制的弹出层。
感兴趣的朋友可以调试运⾏⼀下看看效果如何~O(∩_∩)O~<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗⼝(可拖动，背景灰⾊透明)</title><script type="text/javascript"><!--/*FileName:AlertMsg.jstitle:提⽰标题content:提⽰的内容*/document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")function $(id){ return document.getElementById(id)}function AlertMsg(title,content){var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><inpu //弹出窗⼝设置msgw = 300; //窗⼝宽度msgh = 150; //窗⼝⾼度msgbg = "#FFF"; //内容背景msgcolor = "#000"; //内容颜⾊bordercolor = "#000"; //边框颜⾊titlecolor = "#FFF"; //标题颜⾊titlebg = "#369"; //标题背景//遮罩背景设置var sWidth,sHeight;sWidth = screen.availWidth;sHeight = document.body.scrollHeight;//创建遮罩背景var maskObj = document.createElement("div");maskObj.setAttribute('id','maskdiv');maskObj.style.position = "absolute";maskObj.style.top = "0";maskObj.style.left = "0";maskObj.style.background = "#777";maskObj.style.filter = "Alpha(opacity=30);";maskObj.style.opacity = "0.3";maskObj.style.width = sWidth + "px";maskObj.style.height = sHeight + "px";maskObj.style.zIndex = "10000";document.body.appendChild(maskObj);//创建弹出窗⼝var msgObj = document.createElement("div")msgObj.setAttribute("id","msgdiv");msgObj.style.position ="absolute";msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";msgObj.style.width = msgw + "px";msgObj.style.height = msgh + "px";msgObj.style.fontSize = "12px";msgObj.style.background = msgbg;msgObj.style.border = "1px solid " + bordercolor;msgObj.style.zIndex = "10001";//创建标题var thObj = document.createElement("div");thObj.setAttribute("id","msgth");thObj.className = "DragAble";thObj.style.cursor = "move";thObj.style.padding = "4px 6px";thObj.style.color = titlecolor;thObj.style.background = titlebg;var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";thObj.innerHTML = titleStr;//创建内容var bodyObj = document.createElement("div");bodyObj.setAttribute("id","msgbody");bodyObj.style.padding = "10px";bodyObj.style.lineHeight = "1.5em";bodyObj.innerHTML = con;var txt = document.createTextNode(content)bodyObj.appendChild(txt);//⽣成窗⼝document.body.appendChild(msgObj);$("msgdiv").appendChild(thObj);$("msgdiv").appendChild(bodyObj);}function CloseMsg(){//移除对象document.body.removeChild($("maskdiv"));$("msgdiv").removeChild($("msgth"));$("msgdiv").removeChild($("msgbody"));document.body.removeChild($("msgdiv"));}//拖动窗⼝var ie = document.all;var nn6 = document.getElementById&&!document.all;var isdrag = false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="DragAble") {isdrag = true;oDragObj = oDragHandle.parentNode;nTY = parseInt(oDragObj.style.top);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left);x = nn6 ? e.clientX : event.clientX;document.onmousemove = moveMouse;return false;}}document.onmousedown = initDrag;document.onmouseup = new Function("isdrag=false");//--></script></head><body><table width="600" border="0" cellspacing="0" cellpadding="0"><tr ><td height="100" align="center" ><p><a href="javascript:AlertMsg("温馨提⽰",'')">点我试试!</a></p> </td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。