DIV遮罩层--数据缓冲效果的实现
生活随笔
收集整理的這篇文章主要介紹了
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：
<a href="#" οnclick="sAlert('<img src=Images/loading.gif title=請稍候.... />');">點擊測試</a>
效果圖：
?
在UpdateProgress中的實現：
前臺代碼：
后臺代碼：
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遮罩层--数据缓冲效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 批量关闭电脑有害端口方法
- 下一篇： 11月计划