https://polycn.com/js/smallarAlert.js

1/************************************************
2 * @author :leon.z
3 * @date   :2014-9-3
4 * @description :自己写的alert和confirm弹出框
5 ***********************************************/
6/**
7	自己写的alert和confirm弹出框。用法很简单，直接调用插件对象传人参数ok,
8	注意的是自己无聊将插件升级为用户自定义，完全根据用户审美自定义颜色，再就是有一个全局颜色随机机制，如果您不是重口味，建议您不要开启,
9	自动机制也可以用于调试自己喜欢颜色，然后取到配色方案再关闭全局自动，附上自己找到配色并赋值
10	eg:$.MsgBox({type:"confirm",speed:200,title:"",msg:"",opacity:'',callback:function(){}.....})
11**/
12; (function ($) {
13    $.MsgBox = function (options) {
14        $.MsgBox.defaults = {
15            is_changeBg: true, //默认显示遮罩层
16            title: '提示信息', //头部
17            msg: '至少来点内容吧！', //内容
18            okBtnText: '确定',
19            noBtnText: '取消',
20            opacity: .5, //遮罩层透明度
21            filter: "alpha(opacity=50)",
22            bgColor: '#000', //遮罩层颜色
23            type: '', //调用类型（必须填写）
24            userDesign: false, //用户自定义（默认false）
25            borderColor: "#009bfe", //title下边框颜色(只针对自定义下有效)
26            titleBg: "#ddd", //title背景颜色(只针对自定义下有效)
27            contentBg: "#fff", //内容背景(只针对自定义下有效)
28            dashColor: "#ddd", //虚线颜色(只针对自定义下有效)
29            btnBg: "#168bbb", //按钮颜色(只针对自定义下有效)
30            iconHoverBg: "red", //关闭按钮放上去颜色(只针对自定义下有效)
31            AllColorAuto: false, //是否启用全局颜色随机产生，启用后自定义的颜色将实效(只针对自定义下有效)
32            callback: function () { }, //声明回调函数
33            nocallback: function () { }
34        };
35        var opts = $.extend(true, $.MsgBox.defaults, options);
36        if (!!opts.userDesign && opts.userDesign == !0) {
37            if (!!opts.AllColorAuto && opts.AllColorAuto == !0) {
38                var btnBg = '#' + (Math.random() * 0xffffff << 0).toString(16);
39                var borderColor = '#' + (Math.random() * 0xffffff << 0).toString(16);
40                var titleBg = '#ddd' //不敢随机，影响食欲
41                var contentBg = '#fff'; //不敢随机，影响食欲
42                var dashColor = '#' + (Math.random() * 0xffffff << 0).toString(16);
43                var iconHoverBg = '#' + (Math.random() * 0xffffff << 0).toString(16);
44            } else {
45                var btnBg = opts.btnBg;
46                var borderColor = opts.borderColor;
47                var titleBg = opts.titleBg;
48                var contentBg = opts.contentBg;
49                var dashColor = opts.dashColor;
50                var iconHoverBg = opts.iconHoverBg;
51            }
52        } else {
53            var borderColor = "#009bfe";
54            var titleBg = "#ddd";
55            var contentBg = "#fff";
56            var dashColor = "#ddd";
57            var btnBg = "#168bbb";
58            var iconHoverBg = "red";
59        }
60        (function (opts) {
61            switch (opts.type) { //检查用户传进来的类型，目前只开发到alert,confirm两种
62                case "alert":
63                    pageRender("alert", opts.title, opts.msg);
64                    btnOk(opts.callback);
65                    btnNo();
66                    break;
67                case "confirm":
68                    pageRender("confirm", opts.title, opts.msg);
69                    btnOk(opts.callback);
70                    btnNo(opts.nocallback);
71                    break;
72                default:
73                    pageRender("alert", '消息', "暂时未开发其他功能，请持续关注leon.z插件库");
74                    btnOk();
75                    btnNo();
76                    break;
77            }
78        })(opts);
79        function pageRender(type, title, msg) { /** 渲染页面**/
80            var html = "";
81            html += '<div id="msg_box"></div><div id="msg_con"><span id="msg_tit">' + title + '</span>';
82            html += '<a id="msg_ico">x</a><div id="msg_msg">' + msg + '</div><div id="msg_btnbox">';
83            if (type == "alert") {
84                html += '<input id="msg_btn_ok" type="button" value="' + opts.okBtnText + '" />';
85            }
86            if (type == "confirm") {
87                html += '<input id="msg_btn_ok" type="button" value="' + opts.okBtnText + '" />';
88                html += '<input id="msg_btn_no" type="button" value="' + opts.noBtnText + '" />';
89            }
90            html += '</div></div>';

91            //必须先将html添加到body，再设置Css样式
92            $("body").append(html);
93            renderCss(); //渲染样式
94        };
95        function renderCss() {
96            var msgBox = document.body.clientWidth > 400 ? 400 : document.body.clientWidth - 10;
97            if (opts.is_changeBg == !0) {
98                $("#msg_box").css({
99                    width: '100%',
100                    height: '100%',
101                    zIndex: '99999',
102                    position: 'fixed',
103                    backgroundColor: opts.bgColor,
104                    top: '0',
105                    left: '0',
106                    opacity: opts.opacity,
107                    filter: opts.filter
108                });
109            } else {
110                $("#msg_con").css({
111                    border: "1px solid " + borderColor,
112                    boxShadow: "0px 2px 0px " + borderColor
113                });
114            }
115            $("#msg_con").css({
116                zIndex: '999999',
117                width: msgBox + 'px',
118                position: 'fixed',
119                backgroundColor: contentBg,
120                borderRadius: '15px',
121                cursor: 'pointer'
122            });
123
124            $("#msg_tit").css({
125                display: 'block',
126                fontSize: '14px',
127                color: '#444',
128                padding: '10px 15px',
129                backgroundColor: titleBg,
130                borderRadius: '15px 15px 0 0',
131                borderBottom: '3px solid ' + borderColor,
132                fontWeight: 'bold'
133            });
134
135            $("#msg_msg").css({
136                padding: '20px',
137                lineHeight: '20px',
138                borderBottom: '1px dashed ' + dashColor,
139                fontSize: '13px'
140            });
141
142            $("#msg_ico").css({
143                display: 'block',
144                position: 'absolute',
145                right: '10px',
146                top: '9px',
147                border: '1px solid Gray',
148                width: '18px',
149                height: '18px',
150                textAlign: 'center',
151                lineHeight: '15px',
152                cursor: 'pointer',
153                borderRadius: '12px',
154                fontFamily: '微软雅黑'
155            });
156            $("#msg_btnbox").css({
157                margin: '15px 0 10px 0',
158                textAlign: 'center'
159            });
160            $("#msg_btn_ok,#msg_btn_no").css({
161                width: '85px',
162                height: '30px',
163                color: 'white',
164                border: 'none',
165                cursor: 'pointer'
166            });
167            $("#msg_btn_ok").css({
168                backgroundColor: btnBg
169            });
170            $("#msg_btn_no").css({
171                backgroundColor: 'gray',
172                marginLeft: '20px'
173            });
174            //右上角关闭按钮hover样式
175            $("#msg_ico").hover(function () {
176                var hoverClass = {
177                    "transition-property": "all",
178                    "transition-duration": "0.3s",
179                    "transition-timing-function": "ease-in",
180                    "transition-delay": "0.05s",
181                    "backgroundColor": iconHoverBg,
182                    "color": "white"
183                }
184                if (window.applicationCache) { //是否支持html5 transition属性
185                    $(this).css(hoverClass || {});
186                } else {
187                    $(this).css({
188                        backgroundColor: iconHoverBg,
189                        color: 'white'
190                    });
191                }
192            }, function () {
193                $(this).css({
194                    backgroundColor: titleBg,
195                    color: 'black'
196                });
197            });
198            var _widht = window.screen.clientWidth || document.documentElement.clientWidth; //屏幕宽
199            var _height = window.screen.clientHeight || document.documentElement.clientHeight; //屏幕高
200            var msgBoxidth = $("#msg_con").width();
201            var boxHeight = $("#msg_con").height() + 100;
202            //让提示框居中
203            $("#msg_con").css({
204                top: (_height - boxHeight) / 2 + "px",
205                left: (_widht - msgBoxidth) / 2 + "px"
206            });
207        }
208        //确定按钮事件
209        function btnOk(callback) {
210            $("#msg_btn_ok").click(function () {
211                $("#msg_box,#msg_con").remove();
212                if (typeof (callback) == 'function') {
213                    callback();
214                }
215            });
216        }
217        //取消按钮事件
218        function btnNo(nocallback) {
219            $("#msg_btn_no,#msg_ico").click(function () {
220                $("#msg_box,#msg_con").remove();
221                if (typeof (nocallback) == 'function') {
222                    nocallback();
223                }
224            });
225        }
226    }
227})(jQuery);
228
229//function checkData($form) {
230//    var data = {};
231//    var ispass = true;
232//    $form.find('input').each(function () {
233//        var $this = $(this);
234//        var name = $this.attr('name'), value = $this.val(),
235//            type = $this.attr('datatype'), nullmsg = $this.attr('nullmsg'),
236//            errormsg = $this.attr('errormsg');
237//        if (name == undefined || name == '') return true;
238//        if (value == '') {
239//            alertMsg(nullmsg);
240//            $this.focus();
241//            ispass = false;
242//            return false;
243//        } else if (type == 'e' && !(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value))) {
244//            alertMsg(errormsg);
245//            $this.focus();
246//            ispass = false;
247//            return false;
248//        } else {
249//            data[name] = $this.val();
250//        }
251//    });

252//    function alertMsg(msg) {
253//        $.MsgBox({ type: "alert", speed: 200, userDesign: true, borderColor: "red", btnBg: "#e84200", msg: msg });
254//    }
255//    if (ispass) {
256//        data["token"] = $('#token').val();
257//        submitData();
258//    }
259//}