jquery手机网页遮罩动态加载js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery手机网页遮罩动态加载js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
<title>jquery手机网页遮罩动态加载</title>
<style type="text/css">
#BgDiv1{background-color:#000; position:absolute; z-index:9999;  display:none;left:0px; top:0px; width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
.DialogDiv{position:absolute;z-index:99999;}/*配送公告*/
.U-user-login-btn{ display:block; border:none; background:url(images/bg_mb_btn1_1.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
 .U-user-login-btn:hover, .U-user-login-btn:active{ display:block; border:none; background:url(images/bg_mb_btn1_1_h.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
.U-user-login-btn2{ display:block; border:none;background:url(images/bg_mb_btn1_1_h.png) repeat-x;   font-size:1em; color:#efefef; line-height:49px; cursor:pointer; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;height:53px;}
.U-guodu-box { padding:5px 15px;  background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;  min-heigh:200px; border-radius:10px;}
.U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}

</style>
<SCRIPT src="js/jquery-1.7.2.min.js" type="text/javascript"></SCRIPT>
<script language="javascript" type="text/javascript">
	 $(function(){
	  	$('.U-user-login-btn').toggle(function(){
			$("#BgDiv1").css({ display: "block", height: $(document).height() });
			var yscroll = document.documentElement.scrollTop;
			var screenx=$(window).width();
			var screeny=$(window).height();
		  $(".DialogDiv").css("display", "block");
 			 $(".DialogDiv").css("top",yscroll+"px");
			 var DialogDiv_width=$(".DialogDiv").width();
			 var DialogDiv_height=$(".DialogDiv").height();
			  $(".DialogDiv").css("left",(screenx/2-DialogDiv_width/2)+"px")
			 $(".DialogDiv").css("top",(screeny/2-DialogDiv_height/2)+"px")
			 $("body").css("overflow","hidden");
		},function(){
			
		})
	 })
 </script>
</head>
<body>
<div id="BgDiv1"></div>
<div class="U-login-con">
            <button  class="U-user-login-btn" ontouchstart="this.className='U-user-login-btn2'" ontouchend="this.className='U-user-login-btn'" >点击</button>

            	<div class="DialogDiv"  style="display:none; ">
                    <div class="U-guodu-box">
                    <div>
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" >
                        <tr><td  align="center"><img src="images/loading.gif"></td></tr>
                        <tr><td  valign="middle" align="center" >提交中，请稍后！</td></tr>
                    </table>
                    </div>
            	</div>
     		</div>
          <div class="cl"></div>
</div> 
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)