當(dāng)前位置：
首頁(yè) >
一个简单的遮罩弹出层效果
發(fā)布時(shí)間：2025/7/14
46
豆豆
生活随笔
收集整理的這篇文章主要介紹了
一个简单的遮罩弹出层效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
打醬油的日子就是要多學(xué)習(xí)下，最近在學(xué)寫(xiě)JS類庫(kù)，雖然有面對(duì)對(duì)象語(yǔ)言的基礎(chǔ)，但是感覺(jué)入手前端還是壓力很大，就JS來(lái)說(shuō)，干了半年了，水準(zhǔn)還是不見(jiàn)提高，還停留在寫(xiě)效果代碼的階段，我是一邊著急一邊抹汗，卻也只能自己慢慢的摸索，我認(rèn)識(shí)的大部分程序員應(yīng)該也跟我一樣，沒(méi)有長(zhǎng)輩程序員指點(diǎn)的童鞋真可憐，唉，蒙頭寫(xiě)了個(gè)簡(jiǎn)單的遮罩彈出層控件，效果還不錯(cuò)，就是覺(jué)得代碼邏輯還可以優(yōu)化，很多時(shí)候都有這種感覺(jué)，明明知道哪些地方還可以做的更好，卻不知道怎么樣把它做的更好，求高手指點(diǎn)，求高手支招哇。
效果圖：
html代碼：
<html xmlns="http://www.w3.org/1999/xhtml" > <head><title>無(wú)標(biāo)題頁(yè)</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:'魔盒首頁(yè)',url:'/'}]}";tt.ShowText = "你的操作已經(jīng)成功了，此次操作不可逆轉(zhuǎn)哦！";tt.ContentTitle = "操作成功！";tt.Image = ImageType.success;tt.CreateBox();tt.TimeOutCloseBox(10);});});</script> </head> <body><input type="button" id="ShowMessage" value="點(diǎn)我彈出窗體" /> </body> </html>
JS代碼：注意我的圖片枚舉類型哦，，我覺(jué)得這樣寫(xiě)不怎么好，暫時(shí)沒(méi)有想到更犀利的方法。控件的前提是Jquery導(dǎo)入，導(dǎo)入文件要在這個(gè)JS控件之前哦。
/**作者：By Minnie I'am a thinking cat *描述：提示框遮罩層 *前提：JQuery1.4 以上版本 *創(chuàng)建時(shí)間：2012-3-1 Minnie *最后修改： */ if (typeof MessageBox == 'undefined') { MessageBox = {}; } ///創(chuàng)建MessageBox，保證MessageBox存在MessageBox.PromptBox = function (title, image, showtext, callbackfun, linkjson) {var _self = this;_self.ContentTitle = typeof (title) == "undefined" ? "溫馨提示" :title; //提示標(biāo)題_self.ShowText = typeof (showtext) == "undefined" ? "您確定此次操作嗎？" : showtext; //提示內(nèi)容_self.CallBackFun = callbackfun; //點(diǎn)擊“繼續(xù)”，此窗口關(guān)閉后的回調(diào)方法，可以為空_self.LinkJson = linkjson; //建議鏈接數(shù)組_self.Image = image; //顯示提示圖片,枚舉類型 }///創(chuàng)建提示框 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);//創(chuàng)建遮罩層_self.PromptBox = $("<div class='promptbox'></div>").appendTo(document.body); //創(chuàng)建提示框_self.PromptTopBox = $("<div class='promptbox_top'></div>").appendTo(_self.PromptBox); //創(chuàng)建標(biāo)題欄$("<b></b>").text(_self.ContentTitle).appendTo(_self.PromptTopBox); //添上提示標(biāo)題加上關(guān)閉按鈕和關(guān)閉功能$("<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); //倒計(jì)時(shí)關(guān)閉層_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();//創(chuàng)建鏈接 }//創(chuàng)建鏈接 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\">現(xiàn)在您可以：</p>").append($(link)).appendTo(_self.PromptBottomBox); }///關(guān)閉當(dāng)前提示框 MessageBox.PromptBox.prototype.CloseBox = function () {var _self = this;_self.PromptBoxParent.remove();_self.PromptBox.remove(); }///倒數(shù)關(guān)閉提示框 MessageBox.PromptBox.prototype.TimeOutCloseBox = function (time) {var _self = this;_self.PromptCloseBox.html("還剩<span id='closeNum'>" + time + "</span>秒自動(dòng)關(guān)閉提示窗口");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代碼，亂寫(xiě)的，本來(lái)就一個(gè)效果做測(cè)試，里面圖片我就不好怎么上傳了，又不能帶附件，背景圖片只切了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;}現(xiàn)在已經(jīng)用到快庫(kù)的頁(yè)面上，當(dāng)然，能用多久就不知道了。網(wǎng)址：keaku
轉(zhuǎn)載于:https://my.oschina.net/lianyi/blog/42273
總結(jié)
以上是生活随笔為你收集整理的一个简单的遮罩弹出层效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JSP学习02-config内置对象
- 下一篇： 搞对象的时候走神儿了