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

程序员文章站 2022-05-06 09:40:57

...

打酱油的日子就是要多学习下，最近在学写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

上一篇：字符串解码，确立一个堆栈stack.pop()

下一篇：学生成绩管理系统(C++)

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

jQuery点击自身以外地方关闭弹出层的简单实例

C4D怎么使用锥化效果器制作一个简单的屋顶?

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

一个简单的收缩菜单效果

CDR简单设计一个可爱有趣的页面效果

一个很简单的办法实现TD的加亮效果.

flash制作一个简单的3种动态文字效果

js实现一个简单的数字时钟效果

JavaScript开发中父页面显示遮罩层弹出半透明状态的dialog

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码