javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript">
/******************************
*功能：提供js遮罩功能
*开发：walkingp
*主页:http://www.51obj.cn/
*E-mail:walkingp@126.com
*******************************/
(function(){
    var id='lightBox';
    var $=function(id){return document.getElementById(id);};
    var addEvent=function(obj,type,fn){
        if(obj.attachEvent){
            obj.attachEvent('on' + type,fn);
        }else if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }
    }
    var cuteDialog={
        /*遮罩样式*/
        shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
        /*对话框样式*/
        dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666;',
        /*p层新式*/
        pCssText:'text-align:right;',
        showDialog:function(){
            /*遮罩层*/
            var id=arguments[0];
            var oDiv=$(id);
            if(!$('shadow'))
            {
                var shadow=document.createElement('div');
                shadow.setAttribute('id','shadow');
                shadow.setAttribute('style',this.shadowCssText);

                /*对话框*/
                var dialog=document.createElement('div');
                dialog.setAttribute('id','dialog');
                dialog.setAttribute('style',this.dialogCssText);
                dialog.appendChild(oDiv);

                /*p层:存放操作按钮*/
                var p=document.createElement('p');
                p.setAttribute('style',this.pCssText);

                var btnClose=document.createElement('button');
                btnClose.innerHTML='关闭';
                btnClose.onclick=function(){
                    var oShadow=$('shadow'),oDialog=$('dialog');
                    shadow.style.display = "none";
                    oDialog.style.display = "none";
                }
                p.appendChild(btnClose);

                dialog.appendChild(p);
                document.documentElement.appendChild(shadow);
                document.documentElement.appendChild(dialog);
            }
            else
            {
                $('shadow').style.display = "block";
                $('dialog').style.display = "block";
            }

            //遮罩层100%高度
            $('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
            $('shadow').style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"

            //垂直居中
            this.floatVercital('dialog');
        },
        hideDialog:function(){

        },
        /*始终垂直居中*/
        floatVercital:function(id){
            var iTop=document.documentElement.scrollTop+(document.documentElement.clientHeight-$(id).offsetHeight)/2;
            $('dialog').style.posTop=iTop;
        }
    }
    function InitFunc(){
        document.getElementById('openDlg').onclick=function(){
            cuteDialog.showDialog('lightBox');//初始化遮罩
        }
        window.onscroll=function(){cuteDialog.floatVercital('dialog');}
    }
    /*初始化*/
    (function AddLoadEvent(func){
        if(window.attachEvent){
            window.attachEvent('onload',func);
            window.attachEvent('onscroll',func);
        }else if(window.addEventListener){
            window.addEventListener('load',func,false);
            window.addEventListener('scroll',func,false);
        }else{
            window.onload=func;
        }
     })(InitFunc);
})();
</script>
</head>

<body style="height:1000px;">
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
</body>
</html>

posted @ 2010-03-24 11:38 海底的鱼阅读(592) 评论(0) 收藏举报

刷新页面返回顶部

人生苦短

破茧

javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容

公告