AJAX怎么显示加载中并弹出图层遮挡页面
这篇文章给大家分享的是有关AJAX怎么显示加载中并弹出图层遮挡页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
专注于为中小企业提供成都网站设计、网站制作、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业铁力免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
实现方法
HTML部分:
HTML部分只需要放置一个div,里面包含一个img。
CSS样式:
/*图片加载中div图层,用于遮挡页面*/ .loadingdiv { position:absolute; text-align:center; left:0px; top:0px; z-index:70; background-color:#000000; opacity: 0.7;/*透明#CCCCCC*/ display:none; } /*加载中图片*/ .loadingdiv img { position:absolute; left:0px; top:0px; z-index:80; }
对div和img进行样式设置。
JS代码
//ajax请求过程中,显示加载中图片并显示图层,请求完成隐藏图片 $(function () { //注册ajax加载事件 $("#loading").ajaxStart(function () { //一个div,用来遮挡页面,请求过程中,不可操作页面 var lockwin = $(this); //div占满整个页面 lockwin.css("width", "100%"); lockwin.css("display", "block"); lockwin.css("height", $(window).height() + $(window).scrollTop()); //设置图片居中 $("#loading img").css("display", "block"); $("#loading img").css("left", ($(window).width() - 88) / 2); $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); }); $("#loading").ajaxStop(function () { //隐藏div var lockwin = $(this); lockwin.css("width", "0"); lockwin.css("display", "none"); lockwin.css("height", "0"); //设置图片隐藏 $("#loading img").css("display", "none"); }); });
感谢各位的阅读!关于“AJAX怎么显示加载中并弹出图层遮挡页面”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
新闻名称:AJAX怎么显示加载中并弹出图层遮挡页面
当前网址:http://myzitong.com/article/pihcjs.html