一个简单的遮罩弹出层效果

为什么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代码：注意我的图片枚举类型哦，，我觉得这样写不怎么好，暂时没有想到更犀利的方法。控件的前提是Jquery导入，导入文件要在这个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

一个简单的遮罩弹出层效果相关推荐

jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...
非常漂亮的仿腾讯弹出层效果
2019独角兽企业重金招聘Python工程师标准>>> 非常漂亮的仿腾讯弹出层效果 http://www.jscode.cn/js/v45300 jquery弹出层插件-jquery ...
artDialog对话框在PHP下的简单应用-artDialog弹出层篇
本教程使用的是artDialog 4.1.7版本,由于需要iframe的支持,所以选择这个版本,artDialog 5.0.3不支持iframe. 本教程是基于本站站长在网页设计写代码过程中与PHP页 ...
jQuery实现弹出层效果
###jQuery实现弹出层效果点击弹出层:弹出弹出层点击阴影:关闭弹出层点击"关闭"关闭弹出层整体代码如下: <!DOCTYPE html> <htm ...
CSSJS弹出层效果,兼容所有浏览器
直接上DEMO,不过IE中会提示加载ActiveX控件! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN&q ...
css外层DIV半透明内层div不透明-弹出层效果的实现
css外层DIV半透明内层div不透明-弹出层效果的实现 <!DOCTYPE html> <html><head><meta charset="ut ...
bootstrap模态框遮挡_Bootstrap Modal遮罩弹出层
之前发表过一篇文章叫Bootstrap Modal弹窗代码,其实那个只是一个弹出层代码而已,并不是仿造Bootstrap的,Bootstrap Modal是给外层添加固定fixed,然后内容使用自适应 ...

一个简单的遮罩弹出层效果

一个简单的遮罩弹出层效果相关推荐

最新文章

热门文章