BeAlert 一款alert和confirm美化插件(优化)[通俗易懂]

BeAlert

这是一个美化版的alert和confirm弹出框插件，适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。功能可自己拓展，这里只是一个基础版本的插件，能够取代系统自带的alert和confirm。

How to use?

1、需要jquery的支持，所以请先确认已经引入jquery文件；

1	`<` `script` `src` `=` `"jquery.min.js"` `></` `script` `>`

2、添加css和js文件到你的页面中

1 2	`<` `link` `rel` `=` `"stylesheet"` `href` `=` `"BeAlert.css"` `>` `<` `script` `src` `=` `"BeAlert.js"` `></` `script` `>`

3、按说明调用函数

1 2	`beAlert(title,message,callback,config);` `beConfirm(title,message,callback,config);`

Settings

参数	默认值	描述
title	null	标题
message	null	内容
callback	null	回调函数
config	null	配置参数: width: 宽度, height: 最小高度, type: ‘warning’\|’error’\|’success’\|’info’\|’question’, showConfirmButton: 是否显示确认按钮, showCancelButton: 是否显示取消按钮, confirmButtonText: ‘确认’, cancelButtonText: ‘取消’

Example

<script type="text/javascript">
    $(function () {
        $("#alert").click(function () {
            beAlert("Hello world!", "welcome to my world :)", function () {
                //after click the confirm button, will run this callback function
            }, {type: 'success', confirmButtonText: 'OK'});
        });
        $("#confirm").click(function () {
            beConfirm("Are you sure?", "You will not be able to recover this imaginary file!", function (isConfirm) {
                if (isConfirm) {
                    //after click the confirm
                } else {
                    //after click the cancel
                }
            }, {confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel plx!', width: 400});
        });
    });
</script>

BeAlert.js(优化适配Phone)

没有用原有的alert因为IOS限制了修改系统方法

/**
 * Created by Luker on 2016/10/31.
 ×　Modify by Kong on 2017/04/17
 */
if (typeof $ === 'function') {
    $(function() {
        var BeAlert = {
            defaultConfig: {
                width: $(window).width() <= 320 ? 260 : 320,
                height: 170,
                timer: 0,
                type: 'warning',
                showConfirmButton: true,
                showCancelButton: false,
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            },
            html: '<div class="BeAlert_box">' +
                '<div class="BeAlert_image"></div>' +
                '<div class="BeAlert_title"></div>' +
                '<div class="BeAlert_message"></div>' +
                '<div class="BeAlert_button">' +
                '<button class="BeAlert_cancel"></button>' +
                '<button class="BeAlert_confirm"></button>' +
                '</div>' +
                '</div>',
            overlay: '<div class="BeAlert_overlay"></div>',
            open: function(title, message, callback, o) {
                var opts = {},
                    that = this;
                $.extend(opts, that.defaultConfig, o);
                $('body').append(that.html).append(that.overlay);
                var box = $('.BeAlert_box');
                box.css({
                    'width': opts.width + 'px',
                    'min-height': opts.height + 'px'
                });
                $('.BeAlert_image').addClass(opts.type);
                title && $('.BeAlert_title').html(title).show(),
                    message && $('.BeAlert_message').html(message).show();
                var confirmBtn = $('.BeAlert_confirm'),
                    cancelBtn = $('.BeAlert_cancel');
                opts.showConfirmButton && confirmBtn.text(opts.confirmButtonText).show(),
                    opts.showCancelButton && cancelBtn.text(opts.cancelButtonText).show();
                $('.BeAlert_overlay').die('click').live('click', function() {
                    that.close();
                });
                confirmBtn.die('click').live('click', function() {
                    that.close();
                    typeof callback === 'function' && callback(true);
                });
                cancelBtn.die('click').live('click', function() {
                    that.close();
                    typeof callback === 'function' && callback(false);
                });
                setBeAlertPosition();
            },
            close: function() {
                $(".BeAlert_overlay,.BeAlert_box").remove();
            }
        };
        window.beAlert = function(title, message, callback, opts) {
            BeAlert.open(title, message, callback, opts);
        };
        var _confirm = window.confirm;
        window.beConfirm = function(title, message, callback, opts) {
            opts = $.extend({ type: 'question', showCancelButton: true }, opts);
            if (typeof callback === 'function') {
                BeAlert.open(title, message, callback, opts);
            } else {
                return _confirm(title);
            }
        };
        window.setBeAlertPosition = function() {
            var box = $('.BeAlert_box');
            var h = box.height();
            var w = box.width();
            //重算top和left
            //40是css,Padding了2个20
            box.css({
                'top': ($(window).height() - h - 40) / 2,
                'left': ($(window).width() - w - 40) / 2
            });
        }
    });
}

css

.BeAlert_overlay {
    overflow: hidden;
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 9999;
    background: url("overlay.png");
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
}
.BeAlert_box {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    z-index: 10000;
    font-family: 微软雅黑;
    font-size: 12px;
    text-align: center;
}
.BeAlert_box .BeAlert_image {
    background: #fff;
    width: 60px;
    height: 60px;
    margin: 10px auto;
}
.BeAlert_box .BeAlert_image.warning {
    background: url("warning.png");
    background-size: 60px;
}
.BeAlert_box .BeAlert_image.error {
    background: url("error.png");
    background-size: 60px;
}
.BeAlert_box .BeAlert_image.info {
    background: url("info.png");
    background-size: 60px;
}
.BeAlert_box .BeAlert_image.question {
    background: url("question.png");
    background-size: 60px;
}
.BeAlert_box .BeAlert_image.success {
    background: url("success.png");
    background-size: 60px;
}
.BeAlert_box .BeAlert_title {
    font-size: 20px;
    margin: 5px auto;
}
.BeAlert_box .BeAlert_message {
    font-size: 14px;
    margin: 5px auto;
}
.BeAlert_box .BeAlert_button {
    margin-top: 20px;
}
.BeAlert_box .BeAlert_button button {
    display: none;
    background-color: #8CD4F5;
    color: #fff;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    -webkit-border-radius: 4px;
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
    margin: 0 10px;
    outline: none;
}
.BeAlert_box .BeAlert_button button.BeAlert_cancel {
    background-color: #c1c1c1;
}
.BeAlert_box .BeAlert_button button.BeAlert_cancel:hover {
    background-color: #b9b9b9;
}
.BeAlert_box .BeAlert_button button.BeAlert_confirm:hover {
    background-color: #86CCEB;
}

图片icon

error