html自动淡入遮罩层,JQuery弹出和移除 Html 等待状态框 遮罩层效果 阻塞效果

2021-03-30 更新

在web设计中，有时等待后端数据要一段时间，这个时候又不想用户其它操作时，我们可以选择阻塞效果，让用户无法操作

转换请保留 http://www.luofenming.com/show.aspx?id=ART2020061000001

效果图

以下是核心代码

原创来自 www.luofenming.com

$(function () {

$('#btn1').click(function () {

//创建弹出窗口

addDiv();

//3秒后自动关闭

setTimeout(deleteDiv, 3000);

});

});

function addDiv() {//添加弹出窗体

$('

正在运行，请等待...

').appendTo('body');

$('

}

function deleteDiv() {//关闭弹出窗体 等任务执行完毕执行这个

var my = document.getElementById("divCell");

if (my != null)

my.parentNode.removeChild(my);

var lightbox = document.getElementById("lightbox");

if (lightbox != null)

lightbox.parentNode.removeChild(lightbox);

}