ajax 请示遮盖层

最新推荐文章于 2018-08-30 16:05:44 发布

shine4j

最新推荐文章于 2018-08-30 16:05:44 发布

阅读量686

点赞数

分类专栏： javascript 文章标签： JavaScript

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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=utf-8" />
       <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
       <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({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("<div style='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>
       <style type="text/css">
* {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#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;
   width: 200px;
   height: 200px;
   background: #F00;
   display: none;
   z-index: 5;
}

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

shine4j

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 请示遮盖层

史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层 //显示灰色JS遮罩层function showBg(ct,content){var bH=$("body").height();var bW=$("body").width()+16;var objWH=getObjWh(ct);$("#fullbg")
复制链接

扫一扫