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

BeAlert 一款alert和confirm美化插件(优化)[通俗易懂]BeAlert这是一个美化版的alert和confirm弹出框插件,适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。功能可自己拓展,这里只是一个基础版本的插件,能够取代系统自带的alert和confirm。Howtouse?1、需要jquery的支持,所以请先确认已经引入jquery文件;1_美化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

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

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

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

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

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

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

今天的文章BeAlert 一款alert和confirm美化插件(优化)[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/58015.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注