jQuery创建正在加载半透明对话框

Javascript 2019-12-10 阅读 39 评论 0

使用jquery创建正在加载的半透明缓冲对话框，兼容ie、火狐、chome等浏览器。

主要的思路：

  1. 在body插入一个div，用绝对定位，填充满整个页面，可以用半透明背景
  2. 创建一个新的div层，也是绝对定位，用z-index属性，使之漂浮在第一div上面，居中显示，实现loading效果。

效果如下

调用示例

// 引入包
<script src="jq_mydialog.js" type="text/javascript"></script>
<link href="my_dialog.css" type="text/css" rel="stylesheet" />

$(function (){
	//自定义缓冲标题
	$.myloading({title: "test"});
	//关闭缓冲效果
	//$.myloading("hide");
});

亲自试一试：Demo

源代码地址：javascript-create-isloading-dialog

最后更新 2019-12-10
版权
非特殊说明，本网站所有文章均为原创。如若转载，请注明出处：https://mip.cpming.top/p/javascript-create-isloading-dialog
上一篇： JavaScript验证邮箱格式
下一篇： nginx记录请求时间，$request_time与$upstream_response_time
随机主题
IDE Javascript Nginx React Native shell Java java之HttpURLConnection Php php之curl Node.js Objective C Git C# Android 跨域资源共享 黑苹果 Linux Windows 打印机驱动 视频 Mysql 其他 算法 Python
MIP.watch('startSearch', function (newVal, oldVal) { if(newVal) { var keyword = MIP.getData('keyword'); console.log(keyword); // 替换当前历史记录，新增 MIP.viewer.open('/s/' + keyword, {replace: true}); setTimeout(function () { MIP.setData({startSearch: false}) }, 1000); } }); MIP.watch('goHome', function (newVal, oldVal) { MIP.viewer.open('/', {replace: false}); });