DIV遮罩层--数据缓冲效果的实现

这个非本人所写，拿的网上的自己改了下

JS代码：

View Code

function sAlert(str) {var msgw, msgh, bordercolor;msgw = 300;//提示窗口的宽度msgh = 200;//提示窗口的高度titleheight = 25 //提示窗口标题高度bordercolor = "#FF3C00";//提示窗口的边框颜色titlecolor = "#D2CECE";//提示窗口的标题颜色var sWidth, sHeight;sHeight = window.innerHeight;sWidth = window.innerWidth;var bgObj = document.createElement("div");//创建一个div对象bgObj.setAttribute('id', 'bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值bgObj.style.position = "absolute";//把bgDiv这个div绝对定位bgObj.style.top = "0";//顶部为0bgObj.style.background = "#EFEFF2";//背景颜色bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置bgObj.style.opacity = "0.6";//透明度(火狐浏览器中)bgObj.style.left = "0";//左边为0bgObj.style.width = sWidth + "px";//宽(上面得到的屏幕宽度)bgObj.style.height = sHeight + "px";//高(上面得到的屏幕高度)bgObj.style.zIndex = "100";//层的z轴位置
    document.body.appendChild(bgObj);var msgObj = document.createElement("div")//创建一个div对象msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值msgObj.setAttribute("align", "center");//为div的align赋值//msgObj.style.background ="";//背景颜色为白色//msgObj.style.border = "1px solid " + bordercolor;//边框属性，颜色在上面已经赋值msgObj.style.position = "absolute";//绝对定位msgObj.style.left = "35%";//从左侧开始位置msgObj.style.top = "30%";//从上部开始位置msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性//msgObj.style.marginLeft = "-225px";//左外边距//msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)msgObj.style.height = msgh + "px";//提示框的高(上面定义过)msgObj.style.textAlign = "center";//文本位置属性，居中。msgObj.style.lineHeight = "25px";//行间距msgObj.style.zIndex = "101";//层的z轴位置// var title = document.createElement("h4");//创建一个h4对象// title.setAttribute("id", "msgTitle");//为h4对象填加标题// title.setAttribute("align", "right");//文字对齐方式// title.style.margin = "0";//浮动// title.style.padding = "3px";//浮动// title.style.background = titlecolor;//背景颜色// title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";// title.style.opacity = "0.75";//透明// //title.style.border="1px solid " + bordercolor;//边框// title.style.height = "25px";//高度// title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性// title.style.color = "white";//文字颜色// title.style.cursor = "pointer";//鼠标样式//// title.innerHTML = "<a href=\"#\">关闭</a>";//显示的文字// title.onclick = function () {//     document.body.removeChild(bgObj);//移除遮罩层//     document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题//     document.body.removeChild(msgObj);//移除提示框// }document.body.appendChild(msgObj);//在body中画出提示框层//document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题var txt = document.createElement("p");txt.style.margin = "1em 0";//文本浮动txt.setAttribute("id", "msgTxt");//为p属性增加id属性txt.innerHTML = str;//把传进来的值赋给p属性document.getElementById("msgDiv").appendChild(txt);//把p属性增加到提示框里
}

实现1：

效果图：

在UpdateProgress中的实现：

前台代码：

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false"><ProgressTemplate><div id="bgDiv" style="position: absolute; top: 0px; background: #EFEFF2; filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity: 0.6; left: 0px; width: 1280px; height: 1280px; z-index: 100;"><div id="msgDiv" style="text-align: center; vertical-align: central; position: absolute; left: 35%; top: 30%; width: 300px; height: 200px; line-height: 25px; z-index: 101"><p><img src='Images/loading.gif' title='请稍候....' /></p></div></div></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:GridView ID="GridView1" runat="server"></asp:GridView></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /></Triggers></asp:UpdatePanel><br /><asp:Button Text="猛击一下" runat="server" ID="Button1" OnClientClick="return Check();" OnClick="Button1_Click" /></div></form>
</body>
</html>

后台代码：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace AjaxWebApplication1
{public partial class UpdateProgress : System.Web.UI.Page{static List<Student> Items;protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){Items = new List<Student>();for (int i = 0; i < 20; i++){Items.Add(new Student { ID = "100" + i, Name = "Peter" + i });}}}protected void Button1_Click(object sender, EventArgs e){System.Threading.Thread.Sleep(2000);GridView1.DataSource = Items;GridView1.DataBind();}}public class Student{public string ID { get; set; }public string Name { get; set; }}
}

转载于:https://www.cnblogs.com/Peter-Youny/archive/2012/10/20/2732547.html

DIV遮罩层--数据缓冲效果的实现相关推荐

DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现
文章目录 DIV遮罩层.弹框.设置颜色.边框颜色设置等功能实现一.DIV是什么? 二.功能实现 1.静态页面 2.弹框 3.边框设置三.参考代码 DIV遮罩层.弹框.设置颜色.边框颜色设置等功能实 ...
html div全屏遮罩层,div遮罩层_Jquery全屏遮罩层DIV的实现代码
摘要腾兴网为您分享:Jquery全屏遮罩层DIV的实现代码,弈客围棋,壹学车,万科物业,万达普惠等软件知识,以及淘优优,天天爱学习,qq炫舞脚本,常熟农商银行网站,英文打字软件,抢工长,陌陌app, ...
HTML+JS弹出可移动DIV遮罩层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
浏览器中遮罩层镂空效果的多种实现方法
前端开发中我们有时候会做到页面遮罩层镂空的效果,那什么是页面遮罩层镂空效果,我们先来看一看下图的这个效果.下图是我昨天在实际工作中完成的页面效果: 做这个效果的时候有以下注意的地方: 1.兼容IE7及 ...
一个遮罩层怎么遮罩两个图层_遮罩效果全解（13种方法）
初学者关于遮罩的话题问的较多,下面我将遮罩的一些常见问题进行一下归纳. 1.请问遮罩的原理是什么? 遮罩层好比黑夜中的一支手电筒,照在哪儿(指被遮罩层)哪儿就显现. 第一步:创建两个图层,命名,一个是 ...
html遮罩层原理,纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理本片文章的是实现原 ...
关于遮罩层无效的记录
原本想做一个没有颜色的透明DIV遮罩层,可是添加之后在IE下没有效果. (火狐和Chrome我没试.)被遮住的元素仍能点击. 于是乎,单独把这一块拿出来做了一个小例子.下意识的加了背景颜色.立马有了效 ...
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验: http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目 ...
uni-app z-index无效的解决办法（遮罩层）
前言: 现在是做一个遮罩层效果,需要部分组件要在遮罩层上面,其他比遮罩层低.效果如图: 问题: 于是想到在需要在遮罩层以上的那个组件的z-index使层级拉高但是效果却不如我们想的那样查询资料: ...

DIV遮罩层--数据缓冲效果的实现

DIV遮罩层--数据缓冲效果的实现相关推荐

最新文章

热门文章