<!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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery手机网页遮罩动态加载.zip
版权申诉
82 浏览量
2022-11-22
17:15:06
上传
评论
收藏 77KB ZIP 举报
jquery手机网页遮罩动态加载.zip （8个子文件） 
jquery手机网页遮罩动态加载 
jquery手机网页遮罩动态加载.jpg 48KB jiaoben2567 images 
bg_mb_btn1_1.png 3KB bg_mb_btn1_1_h.png 180B bg_mb_btn2_1_h.png 181B bg_mb_btn2_1.png 3KB
loading.gif 4KB
index.html 4KB js 
jquery-1.7.2.min.js 93KB资源评论
