提示插件的进化版

来源：互联网发布：mac腾讯视频卡死编辑：程序博客网时间：2024/04/30 00:28
修改了上次博客的提示小插件。
使他出现的初始位置始终随着窗口大小改变，使之出现在最中间的位置。
两种模式：模态，非模态。
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);
0 0