提示插件的进化版

修改了上次博客的提示小插件。
使他出现的初始位置始终随着窗口大小改变,使之出现在最中间的位置。
两种模式:模态,非模态。
4种提示的样式。实现方法:在button绑定点击事件里绑定body用appearDialog方法。
才疏学浅,还在努力,有志同道合的朋友么。

(function($, window, document,undefined){  
            var dialogInfo = {
                message: 'this ia a message', // 消息内容
                style: 'info', // 弹窗类型
                time: 1000, // 显示时间
                model:false // 是否模态
            };
            $.gmNoticeWnd = function(opt) {
                var settings = $.extend({}, dialogInfo, opt),
                    dialogHtml = "";

                    dialogHtml += '<div class = "notice alert" style = "width:200px; padding:0px">';
                        dialogHtml += "<div class = 'notice-head' style = 'height: 10px'>";
                            dialogHtml +=  "<button type = 'button' class = 'close' style = 'display: none'>&times;</button>";
                        dialogHtml += "</div>";
                        dialogHtml +="<br>"
                        dialogHtml += "<div class = 'notice-body'>";
                            dialogHtml += "<p style = 'margin: 0px; word-break: break-all; text-indent:2em;'>" + settings.message + "</p>";
                        dialogHtml += "</div>";
                    dialogHtml += '</div>';

                var modalDialog = "<div class = 'noticecover' id = 'coverId' style = 'position: absolute; top: 0; left: 0; width:100%; height:100%; z-index: 9999;'>" +
                                  dialogHtml +
                                  "</div>";

                return (function setNotice() {
                    var noticeStyle = settings.style;

                    if (settings.model == false) {
                        $("body").append(dialogHtml);
                        $(".noticecover").css("background","#000000");
                    } else {
                        $("body").append(modalDialog);
                        $("button").css("display","block");    
                    };
                    var $notice = $(".notice"),
                        noticeTop = (document.documentElement.clientHeight / 2) - $notice.height(),
                        noticeLeft = (document.documentElement.clientWidth / 2) - $notice.width() / 2;

                    $notice.css({"position": "absolute",
                                 "top": noticeTop,
                                 "left": noticeLeft,                        
                                });

                    switch (noticeStyle) {
                        case 'error':
                            $notice.addClass("alert-danger");
                            break;

                        case 'normal':
                            $notice.addClass("alert-success");
                            break;

                        case 'warning':
                            $notice.addClass("alert-warning");
                            break;

                        default:
                            $notice.addClass("alert-info");
                    };

                    setTimeout(function() {

                        if (settings.model == false) {
                            $notice.remove();
                        } else {
                            $(".close").click(function() {
                                $(".noticecover").remove();
                            });
                        };  
                    }, settings.time);

                    function setPosition() {
                        var fatherCover = document.getElementById("coverId"),
                            changedLeft = $(fatherCover).width() / 2 - $notice.width() / 2;
                            changedTop = $(fatherCover).height() / 2 - $notice.height() / 2;

                        $notice.css({"position": "absolute",
                                    "top": changedTop,
                                    "left": changedLeft,                        
                                });
                    }

                    if (window.addEventListener) {

                        window.addEventListener("resize", function() {
                            setPosition();
                        })
                    } else if (window.attachEvent) {

                        window.attachEvent("onresize", function() {
                            setPosition();
                        })
                    }
                } ());      
            };
            $.fn.appearDialog = function(opt) {
                $.gmNoticeWnd(opt);
            };
        })(jQuery, window, document);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值