纯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>

<script type=”text/javascript” language=”javascript”>
    var txt = “账号:<input type=\’text\’size=\’18\’ id=\’userid\’ onblur=\’check(this.id)\’><span id=\’spuserid\’>请输入用户名</span><br/>密码:<input type=\’password\’ id=\’pwd\’><span>请输入用 密码</span>”;

    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;width: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?\’)) {

                document.body.removeChild(alertFram); //移除弹出层
                document.body.removeChild(shield);   //移除遮罩层
                document.body.onselectstart = function() { return true; } //打开选择
                document.body.oncontextmenu = function() { return true; } //开打右键
//            } else {
//                return;
//            }

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

  
</script>

<body>
    <input type=”button” value=”点击这里” onclick=”sAlert();” />
</body>
</html>

//—–全部代码 asp.net程序

原文链接:https://www.cnblogs.com/ganler1988/archive/2011/03/17/1987376.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章