javascript弹出遮罩层对话框实例

时间：2022-06-25 20:41:51 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
        <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title> 
        <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <scripttype="text/javascript"> 
            //显示灰色JS遮罩层  
            function showBg(ct,content){  
                var bH=$("body").height();  
                var bW=$("body").width()+16;  
                var objWH=getObjWh(ct);  
                $("#fullbg").<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>({width:bW,height:bH,display:"block"});  
                var tbT=objWH.split("|")[0]+"px";  
                var tbL=objWH.split("|")[1]+"px";  
                $("#"+ct).css({top:tbT,left:tbL,display:"block"});  
                $("#"+content).html("<divstyle='text-align:center'>正在加载，请稍后...</div>");  
                $(window).scroll(function(){resetBg()});  
                $(window).resize(function(){resetBg()});  
            }  
            function getObjWh(obj){  
                var st=document.documentElement.scrollTop;//滚动条距顶部的距离  
                var sl=document.documentElement.scrollLeft;//滚动条距左边的距离  
                var ch=document.documentElement.clientHeight;//屏幕的高度  
                var cw=document.documentElement.clientWidth;//屏幕的宽度  
                var objH=$("#"+obj).height();//浮动对象的高度  
                var objW=$("#"+obj).width();//浮动对象的宽度  
                var objT=Number(st)+(Number(ch)-Number(objH))/2;  
                var objL=Number(sl)+(Number(cw)-Number(objW))/2;  
                return objT+"|"+objL;  
            }  
            function resetBg(){  
                var fullbg=$("#fullbg").css("display");  
                if(fullbg=="block"){  
                    var bH2=$("body").height();  
                    var bW2=$("body").width()+16;  
                    $("#fullbg").css({width:bW2,height:bH2});  
                    var objV=getObjWh("dialog");  
                    var tbT=objV.split("|")[0]+"px";  
                    var tbL=objV.split("|")[1]+"px";  
                    $("#dialog").css({top:tbT,left:tbL});  
                }  
            }

//关闭灰色JS遮罩层和操作窗口  
            function closeBg(){  
                $("#fullbg").css("display","none");  
                $("#dialog").css("display","none");  
            }

</script> 
        <styletype="text/css">

#fullbg{background-color: Gray;display:none;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4;}

#dialog {position:absolute;background:#F00;display: none;z-index: 5;}

#main {  
                  
            }  
        </style> 
    </head> 
    <body> 
        <divid="main"> 
            <ahref="#rhis"onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> 
        </div> 
         
        <divid="fullbg"></div> 
         
         
        <divid="dialog"> 
            <divid="dialog_content"></div> 
            <divstyle="text-align: center;"><ahref="#"onclick="closeBg();">关闭</a></div> 
        </div> 
         
    </body> 
</html>

</td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

javascript弹出遮罩层对话框实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程