html 页面 ajax 方法显示遮罩
2023-09-11 14:19:36 时间
showLoading.css 样式:
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 50% 0 0;background:#333333;display:none;} .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;} *html,*html body{background-image:url(about:blank);background-attachment:fixed;} *html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));} #AjaxLoading{color:#37a;font-size:12px;font-weight:bold;} /*#AjaxLoading div.loadingWord{width:300px;height:50px;line-height:50px;border:0px solid #000000;background:#65eae6;}*/ #AjaxLoading div.loadingWord{} #AjaxLoading img{margin:10px 15px;float:left;display:inline;}
html 代码,辅助两个div
<body> <!--遮罩 开始--> <div class="overlay"></div> <div id="AjaxLoading" class="showbox"> <div class="loadingWord"><img src="/resource/jQuery.showLoading/images/loading2.gif" /></div> </div> <!--遮罩 结束--> </body>
JS代码
<script type="text/javascript"> //----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if (document.readyState != 'complete') //当页面加载状态 { //----显示遮罩 开始---- $(".overlay").css({ 'display': 'block', 'opacity': '0.8' }); $(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
$('#AjaxLoading').show() //----显示遮罩 结束---- } } //----判断当前页面是否加载状态 结束 ---- $(function () { jQuery.ajax({ url: 'test.ashx', type: "POST", dataType: "json", data: { "cptypeid": cptypeid, "cpnameid": cpnameid }, success: function (result) { if (result.success) { } //----隐藏遮罩 开始---- $(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400); $(".overlay").css({ 'display': 'none', 'opacity': '0' });
$('#AjaxLoading').hide()
//----隐藏遮罩 结束----
} })
})
</script>
相关文章
- 实例探究Python以并发方式编写高性能端口扫描器的方法
- 不安全的HTTP方法
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 工作总结 @Html 辅助方法 为 生成的 标签设置元素属性 htmlAttributes 一个对象,其中包含要为该元素设置的 HTML 特性。
- Html超级链(A标签)实现按钮效果的五种方法(综合实例)
- Elasticsearch 在私有云上管理Elasticsearch集群的一些方法
- [转]如何在组件中去使用vuex的值和方法?
- [转]bootstrapTable refresh 方法使用简单举例
- [转]html页面调用js文件里的函数报错onclick is not defined处理方法
- html 中设置span的width完美解决方法
- JS-HTML DOM remove() 方法
- HTML-Html开发之Viewport的使用
- 一款很不错的html转xml工具-Html Agility Pack
- html添加css样式的两种方法
- pandas的concat方法
- python 常库介绍及安装方法
- PagingAndSortingRespository相关方法的更改
- 《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.2 HTML文件的编写方法
- 关于Java中常用加密/解密方法的实现
- [HTML]点击按钮,页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)
- load 方法全程跟踪
- 解决Html.CheckBoxFor中”无法将类型 bool 隐式转换为 bool。存在一个显式转换..."的方法
- Unity 进阶 之 判断基于物体所处位置(前后左右)/ 方法原理 /注意事项的简单整理
- Web 之 html 如何显示隐藏Html元素的两种方法简单整理
- html中#include file的使用方法
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结