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

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果，下面我给大家讲一下有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="弹出弹框" onclick="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="隐藏弹出层" onclick="hidePop(‘tcc‘)"/>

</div>

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

版权声明：本文为博主原创文章，未经博主允许不得转载。