一个简单的遮罩弹出层效果
生活随笔
收集整理的這篇文章主要介紹了
一个简单的遮罩弹出层效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
打醬油的日子就是要多學習下，最近在學寫JS類庫，雖然有面對對象語言的基礎，但是感覺入手前端還是壓力很大，就JS來說，干了半年了，水準還是不見提高，還停留在寫效果代碼的階段，我是一邊著急一邊抹汗，卻也只能自己慢慢的摸索，我認識的大部分程序員應該也跟我一樣，沒有長輩程序員指點的童鞋真可憐，唉，蒙頭寫了個簡單的遮罩彈出層控件，效果還不錯，就是覺得代碼邏輯還可以優化，很多時候都有這種感覺，明明知道哪些地方還可以做的更好，卻不知道怎么樣把它做的更好，求高手指點，求高手支招哇。
效果圖：
html代碼：
<html xmlns="http://www.w3.org/1999/xhtml" > <head><title>無標題頁</title><link href="css/showMessageBox.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.7.1.min.js" type="text/javascript"></script><script src="js/showMessageBox.js" type="text/javascript"></script><script type="text/javascript" language="javascript">$(function(){$("#ShowMessage").click(function(){var tt = new MessageBox.PromptBox();tt.LinkJson = "{urljson:[{text:'我的軟件',url:'/member/'},{text:'魔盒首頁',url:'/'}]}";tt.ShowText = "你的操作已經成功了，此次操作不可逆轉哦！";tt.ContentTitle = "操作成功！";tt.Image = ImageType.success;tt.CreateBox();tt.TimeOutCloseBox(10);});});</script> </head> <body><input type="button" id="ShowMessage" value="點我彈出窗體" /> </body> </html>
JS代碼：注意我的圖片枚舉類型哦，，我覺得這樣寫不怎么好，暫時沒有想到更犀利的方法?？丶那疤崾荍query導入，導入文件要在這個JS控件之前哦。
/**作者：By Minnie I'am a thinking cat *描述：提示框遮罩層 *前提：JQuery1.4 以上版本 *創建時間：2012-3-1 Minnie *最后修改： */ if (typeof MessageBox == 'undefined') { MessageBox = {}; } ///創建MessageBox，保證MessageBox存在MessageBox.PromptBox = function (title, image, showtext, callbackfun, linkjson) {var _self = this;_self.ContentTitle = typeof (title) == "undefined" ? "溫馨提示" :title; //提示標題_self.ShowText = typeof (showtext) == "undefined" ? "您確定此次操作嗎？" : showtext; //提示內容_self.CallBackFun = callbackfun; //點擊“繼續”，此窗口關閉后的回調方法，可以為空_self.LinkJson = linkjson; //建議鏈接數組_self.Image = image; //顯示提示圖片,枚舉類型 }///創建提示框 MessageBox.PromptBox.prototype.CreateBox = function () {var _self = this;var height = document.documentElement.clientHeight + document.body.scrollHeight;var width = document.documentElement.clientWidth;document.body.style.overflow = "hidden";_self.PromptBoxParent = $("<div class='promptbox_parent'></div>").css("width", width + "px").css("height", height + "px").appendTo(document.body);//創建遮罩層_self.PromptBox = $("<div class='promptbox'></div>").appendTo(document.body); //創建提示框_self.PromptTopBox = $("<div class='promptbox_top'></div>").appendTo(_self.PromptBox); //創建標題欄$("<b></b>").text(_self.ContentTitle).appendTo(_self.PromptTopBox); //添上提示標題加上關閉按鈕和關閉功能$("<p></p>").append("<img id='feedback_closer' src='/images/close.gif'/>").click(function () {_self.PromptBoxParent.remove();_self.PromptBox.remove();}).appendTo(_self.PromptTopBox);_self.PromptCloseBox = $("<p class='prompt_p'></p>").appendTo(_self.PromptBox); //倒計時關閉層_self.PromptContentBox = $("<div class='promptbox_content'></div>").appendTo(_self.PromptBox); $("<div class='prompt_text'></div>").text(_self.ContentTitle).prepend($(_self.Image)).appendTo(_self.PromptContentBox);_self.PromptBottomBox = $("<div class='promptbox_prompt'></div>").appendTo(_self.PromptBox); $("<p class=\"pro_p1\"></p>").text(_self.ShowText).appendTo(_self.PromptBottomBox);_self.CreateLink();//創建鏈接 }//創建鏈接 MessageBox.PromptBox.prototype.CreateLink = function () {var _self = this;if (_self.LinkJson != "" && typeof (_self.LinkJson) != "undefined") {var json = eval("(" + _self.LinkJson + ")");var arr = json.urljson;var link = "";for (var i = 0; i < arr.length; i++) {link += "<a href='" + arr[i].url + "'>" + arr[i].text + "</a>";}}$("<p class=\"pro_p2\">現在您可以：</p>").append($(link)).appendTo(_self.PromptBottomBox); }///關閉當前提示框 MessageBox.PromptBox.prototype.CloseBox = function () {var _self = this;_self.PromptBoxParent.remove();_self.PromptBox.remove(); }///倒數關閉提示框 MessageBox.PromptBox.prototype.TimeOutCloseBox = function (time) {var _self = this;_self.PromptCloseBox.html("還剩<span id='closeNum'>" + time + "</span>秒自動關閉提示窗口");index = time;timeout = setInterval(function(){$("#closeNum").text(index);if (index == 0) {_self.PromptBoxParent.remove();_self.PromptBox.remove();clearInterval(timeout);return;}index--;}, 1000); }///提示圖片：枚舉類型 if(typeof ImageType == "undefined"){var ImageType= {error : "<img src='/images/error_pic01.jpg' align='absmiddle'/>",success: "<img src='/images/success.gif' align='absmiddle'/>",Warning: "<img src='/images/Warning.gif' align='absmiddle'/>",NullImg: ""} }
另外附上一段css代碼，亂寫的，本來就一個效果做測試，里面圖片我就不好怎么上傳了，又不能帶附件，背景圖片只切了1px又很小，不好顯示。
.promptbox{top: 50%; zoom:1; clear:both; left: 50%;width: 400px;margin-left: -200px;margin-top: -180px;border: #cccccc solid 1px;position: fixed;overflow: hidden;background: url(/images/error_bg.jpg) repeat-x bottom;text-align: center;_right: -20px;_position: absolute;_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)/2);} .promptbox_parent{position: absolute;top: 0;left: 0;filter:Alpha(Opacity="50");opacity:0.5;background-color: #666666;font-size: 12px;} .clear{ clear:both; margin:auto;} .promptbox_top{ background:url(/images/error_titlebg.jpg) repeat-x; height:30px;width:400px; color:#ffffff;} .promptbox_top b{ float:left;line-height:30px; margin-left:10px; letter-spacing:2px; font-size:12px;} .promptbox_top p{ float:right; width:20px; margin-top:7px; margin-right:8px;cursor:pointer} .promptbox_content{ margin-top:35px; } .promptbox_content div{ display:inline-block;} .promptbox_content img{ margin-right:0px; float:left; margin-left:90px;} .promptbox_content .prompt_text{ font-size:20px; font-family:微軟雅黑;line-height:90px; color:#9b5b0b; font-weight:bold; letter-spacing:3px; margin-right:80px;} .promptbox_prompt{ margin-left:50px;margin-bottom:40px; margin-top:35px;color:#523E33; font-size:12px; } .promptbox_prompt span{color:#9b5b0b; font-size:12px; font-weight:bold;} .promptbox_prompt p{zoom:1; clear:both; text-align:left; line-height:25px;} .promptbox_prompt a{ margin-right:12px; color:#1072BE; text-decoration:underline;} .promptbox_prompt a:hover{ color:#333333;} .prompt_p{ text-align:right; font-size:12px; color:#999999; margin-right:5px; width:390px;} .prompt_p span{ font-family:Arial; font-size:18px; margin:0px 3px;} .pro_p1{background:url(/images/error_pic02.gif) no-repeat 0px -393px; padding-left:15px;} .pro_p2{background:url(/images/error_pic02.gif) no-repeat 0px -423px; padding-left:15px;}現在已經用到快庫的頁面上，當然，能用多久就不知道了。網址：keaku
轉載于:https://my.oschina.net/lianyi/blog/42273
總結
以上是生活随笔為你收集整理的一个简单的遮罩弹出层效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JSP学习02-config内置对象
- 下一篇： 搞对象的时候走神儿了