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
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}); });