纯javascript遮罩层原理

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>

    function check(objID) {
        var obj = document.getElementById(objID).value;
        if (obj == "")
            document.getElementById("spuserid").style.color = "red";
    }

    function sAlert() //sAlert函数参数为txt
    {
        var shield = document.createElement("DIV");
        //创建遮罩层对象<div>
        shield.id = "shield";       //设定<div>的ID即 <div id="shield">
        shield.style.position = "absolute";    //<div>的position定位为绝对定位
        shield.style.left = "0px";      //<div>左点为0
        shield.style.top = "0px";      //<div>上点为0
        shield.style.width = "100%";     //<div>宽度为100%
        shield.style.height = "100%"; //<div>高度为body的滚动高度
        shield.style.background = "#333";    //<div>背景色为#333
        shield.style.textAlign = "center";    //<div>文字居中
        shield.style.zIndex = "10000";     //<div>层叠顺序数字大的会压在数字小的上面
        shield.style.filter = "alpha(opacity=0)"; //<div>滤镜透明度为0
        shield.style.opacity = 0;      //<div>透明度为0
        //以上创造了一个<div></div>层就是遮罩层

        var alertFram = document.createElement("DIV");
        //创建弹出层对象<div>
        alertFram.id = "alertFram";      //设定<div>的ID即 <div id="alertFram">
        alertFram.style.position = "absolute";   //<div>的position定位为绝对定位
        alertFram.style.left = ((parseInt(document.documentElement.scrollWidth) / 2) - 225) + "px";     //<div>浏览器可见区域的一半在减去自身宽度的一半
        alertFram.style.top = ((parseInt(document.documentElement.scrollHeight) / 2) - 75) + "px";     //<div>。。。。。可以控制弹窗的纵向位置
        alertFram.style.width = "450px";    //<div>宽度为450px 弹窗宽度
        alertFram.style.height = "150px";    //<div>高度为150px 弹窗高度
        alertFram.style.background = "#ccc";   //<div>背景色为#ccc
        alertFram.style.textAlign = "center";   //<div>文字居中
        alertFram.style.lineHeight = "150px";   //<div>行高150px
        alertFram.style.zIndex = "10001";    //<div>层叠顺序因为数字大所有会压在shield这个<div>之上
        //以上创造了一个<div></div>层就是弹窗的层

        strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;100%;border:solid 1px red\">\n";
        strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[提示]</li>\n";
        strHtml += " <li style=\"background:#fff;font-size:12px;height:120px;line-height:60px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + txt + "</li>\n";
        strHtml += " <li style=\"background:#FDEEF4;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input style='float:left;margin-left:100px' type=\"button\" value=\" 确定 \" id=\"do_OK\" onclick=\"doOk()\" /><input type=\"button\" value=\" 取消 \" id=\"do_Cancel\" onclick=\"doCancel()\" style='float:right;margin-right:100px'/></li>\n";
        strHtml += "</ul>\n";

//以上拼接了弹窗的内容

alertFram.innerHTML = strHtml; //把内容写进弹窗

document.body.appendChild(alertFram); //添加弹窗层

document.body.appendChild(shield); //添加shield遮罩层

        //这部分用来改变遮罩层的背景颜色 start
        this.setOpacity = function(obj, opacity) { //构建了一个setOpacity方法设定透明度
            if (opacity >= 1) opacity = opacity / 100; //如果透明度大于1 则透明度等于原来的百分之一
            try { obj.style.opacity = opacity; } catch (e) { } //try...catch测试实现错误处理
            try {
                if (obj.filters.length > 0 && obj.filters("alpha")) {
                    obj.filters("alpha").opacity = opacity * 150;   //设定滤镜透明度为原来的150倍
                } else {
                    obj.style.filter = "alpha(opacity=\"" + (opacity * 150) + "\")"; //设定滤镜透明度为原来的150倍
                }
            } catch (e) { }
        }

var c = 0;

        this.doAlpha = function() {   //构建了一个doAlpha方法用于调整滤镜
            if (++c > 20) { clearInterval(ad); return 0; } //当c大于20 停止定时器
            setOpacity(shield, c);    //执行setOpacity方法
        }
        var ad = setInterval("doAlpha()", 1); //每毫秒执行doAlpha方法

// end

        //构建了一个doOk方法用于点击确定时移除弹出层
        this.doOk = function() {
//            if (window.confirm('Are You Sure To Remove The AlertFrom?')) {

        }
        //构建了一个doCancel 点击取消按钮
        this.doCancel = function() {
            alert('Click the Cancel Button ');
        }
    }

</script>

//-----全部代码 asp.net程序