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

标签：

     有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果，下面我给大家讲一下有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>

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

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

标签：

原文地址：http://blog.csdn.net/yu13767514297/article/details/47151223