实现自己自定义的弹框和遮罩层

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果，下面我给大家讲一下有javascript实现最简单的属于自己的弹框和弹框遮罩层效果，首先编写遮罩层的javascript，代码如下：

1、遮罩层js：

//获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; //top=500; left = 500; //height=0; width = 500; height = 300; top = 300; return { top: top, left: left, height: height, width: width }; } //屏蔽输入，显示蒙板 function showMask(id) { var obj = document.getElementById(id); obj.style.width = document.body.clientWidth; obj.style.height = document.body.clientHeight; // obj.style.height = window.screen.availHeight obj.style.display = "block"; } //隐藏蒙板 function hideMask(id) { document.getElementById(id).style.display = "none"; } //显示弹框 function showPop(id) { showMask(mask); var width = 300; //弹出框的宽度 var height = 250; //弹出框的高度 var obj = document.getElementById(id); obj.style.display = "block"; obj.style.position = "absolute"; obj.style.zindex = "10"; obj.style.overflow = "hidden"; obj.style.width = width + "px"; obj.style.height = height + "px"; var Position = getPosition(); leftadd = (Position.width - width) / 2; topadd = (Position.height - height) / 2; obj.style.top = (Position.top + topadd) + "px"; obj.style.left = (Position.left + leftadd) + "px"; window.onscroll = function () { var Position = getPosition(); obj.style.top = (Position.top + topadd) + "px"; obj.style.left = (Position.left + leftadd) + "px"; }; } //隐含 function hidePop(id) { hideMask(mask); document.getElementById(id).style.display = "none"; }

遮罩层和弹框的html如下：

<input type="button" value="弹出弹框" οnclick="showPop(tcc)"/>

<!--蒙板--> <div id="mask" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; background-color: #000; width: 100%; height: 100%; z-index: 200; position: absolute; left: 0; top: 0; display: none; overflow: hidden;"> </div> <!--蒙板结束--> <!--弹出层----> <div id="tcc" style="display:none;background-color:#00ffff;z-index: 201;"> <input type="button" value="隐藏弹出层" οnclick="hidePop(tcc)"/> </div>

利用以上的效果我们可以制作自定义的弹框了，弹框的内容也可以自定义了。