php点击遮罩层遮罩层消失,jQuery实现按钮点击遮罩加载及处理完后恢复的效果

本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果。分享给大家供大家参考，具体如下：

运行效果图如下：

具体代码如下：

EasyUI加载效果

body{font-size:12px}

.datagrid-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;filter:alpha(opacity=30);background-color:#e0ecff;display:none}

.datagrid-mask-msg{position:absolute;top:50%;margin-top:-20px;padding:10px 15px 10px 15px;width:auto;height:16px;border-width:2px;border-color:#68a5ff;border-style:solid;display:none}

.img1{vertical-align:middle;}

//load

function EasyUILoad() {

$("

$("

正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });

}

//display Load

function dispalyEasyUILoad() {

$(".datagrid-mask").remove();

$(".datagrid-mask-msg").remove();

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class EasyUiLoad : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

//处理逻辑...

//完成处理后恢复

ClientScript.RegisterStartupScript(this.GetType(), "closeLoad", "dispalyEasyUILoad();", true);

}

}

希望本文所述对大家jQuery程序设计有所帮助。