DIV遮罩层--数据缓冲效果的实现
生活随笔
收集整理的這篇文章主要介紹了
DIV遮罩层--数据缓冲效果的实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這個(gè)非本人所寫，拿的網(wǎng)上的自己改了下 JS代碼： View Code function sAlert(str) {var msgw, msgh, bordercolor;msgw = 300;//提示窗口的寬度msgh = 200;//提示窗口的高度titleheight = 25 //提示窗口標(biāo)題高度bordercolor = "#FF3C00";//提示窗口的邊框顏色titlecolor = "#D2CECE";//提示窗口的標(biāo)題顏色var sWidth, sHeight;sHeight = window.innerHeight;sWidth = window.innerWidth;var bgObj = document.createElement("div");//創(chuàng)建一個(gè)div對(duì)象bgObj.setAttribute('id', 'bgDiv');//可以用bgObj.id="bgDiv"的方法，是為div指定屬性值bgObj.style.position = "absolute";//把bgDiv這個(gè)div絕對(duì)定位bgObj.style.top = "0";//頂部為0bgObj.style.background = "#EFEFF2";//背景顏色bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie瀏覽器透明度設(shè)置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")//創(chuàng)建一個(gè)div對(duì)象msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是為div指定屬性值msgObj.setAttribute("align", "center");//為div的align賦值//msgObj.style.background ="";//背景顏色為白色//msgObj.style.border = "1px solid " + bordercolor;//邊框?qū)傩?#xff0c;顏色在上面已經(jīng)賦值msgObj.style.position = "absolute";//絕對(duì)定位msgObj.style.left = "35%";//從左側(cè)開始位置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");//創(chuàng)建一個(gè)h4對(duì)象// title.setAttribute("id", "msgTitle");//為h4對(duì)象填加標(biāo)題// title.setAttribute("align", "right");//文字對(duì)齊方式// title.style.margin = "0";//浮動(dòng)// title.style.padding = "3px";//浮動(dòng)// 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";//鼠標(biāo)樣式//// title.innerHTML = "<a href=\"#\">關(guān)閉</a>";//顯示的文字// title.onclick = function () {// document.body.removeChild(bgObj);//移除遮罩層// document.getElementById("msgDiv").removeChild(title);//在提示框中移除標(biāo)題// document.body.removeChild(msgObj);//移除提示框// }document.body.appendChild(msgObj);//在body中畫出提示框?qū)?/span>//document.getElementById("msgDiv").appendChild(title);//在提示框中增加標(biāo)題var txt = document.createElement("p");txt.style.margin = "1em 0";//文本浮動(dòng)txt.setAttribute("id", "msgTxt");//為p屬性增加id屬性txt.innerHTML = str;//把傳進(jìn)來的值賦給p屬性document.getElementById("msgDiv").appendChild(txt);//把p屬性增加到提示框里
}
實(shí)現(xiàn)1：
<a href="#" οnclick="sAlert('<img src=Images/loading.gif title=請(qǐng)稍候.... />');">點(diǎn)擊測(cè)試</a>
效果圖：
?
在UpdateProgress中的實(shí)現(xiàn)：
前臺(tái)代碼：
后臺(tái)代碼：
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; }} }?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Peter-Youny/archive/2012/10/20/2732547.html
總結(jié)
以上是生活随笔為你收集整理的DIV遮罩层--数据缓冲效果的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 批量关闭电脑有害端口方法
- 下一篇： 11月计划