手写jquery提示框插件

一、提示框效果图

二、实现思路

提示框中都有图标、标题、提示信息，这些项为公共项，可提取出来

提示框按钮显示不同，可设置为可选项

操作按钮后要关闭提示框，点击按钮后可回调，满足项目实际需求

三、实现方法

呈现出来的html效果

<div id="jwTips" style="display: none;">
        <div class="tip-con">
            <img src="images/icon-tips.png" alt="">
            <h4>提示提示提示提示提示提示提示提示提示提示提示</h4>
            <p>是否开始查重是否开始查重是否开始查重是否开始查重是否开始查重</p>
            <div class="btn">
                <button class="btn btn-cancel">取消</button>
                <button class="btn btn-sure">确定</button>
            </div>
        </div>
    </div>

function myConfirm(options) {
    // 合并默认选项和用户提供的选项
    var settings = Object.assign({
        type: '', // 类型，可选值：success, error, warning, loading
        title: '删除确认', // 标题
        message: '你确定要删除这条记录吗？', // 内容
        isShowBtn: true,// 是否显示按钮
        isShowBtnCancel: true,// 是否显示取消按钮
        confirmCallback: function () { console.log('确认按钮被点击'); },
        cancelCallback: function () { console.log('取消按钮被点击'); }
    }, options);

    // 插件主体代码
    var imgSrc = '', tipLoading = "";
    //不通类型提示语显示图片不同
    switch (settings.type) {
        case 'success':
            imgSrc = 'images/icon-success.png';
            break;
        case 'error':
            imgSrc = 'images/icon-error.png';
            break;
        case 'warning':
            imgSrc = 'images/icon-tips.png';
            break;
        case 'loading':
            tipLoading = "tipLoading";
            imgSrc = 'images/icon-loading.png';
            break;
        default:
            imgSrc = 'images/icon-tips.png';
            break;
    }
    //拼接html
    var dialogHtml = '<div id="jwTips">' +
        '<div div class="tip-con" >' +
        ' <img src="' + imgSrc + '" id="' + tipLoading + '" alt="">' +
        '<h4>' + settings.title + '</h4>' +
        '<p>' + settings.message + '</p>';
    if (settings.isShowBtn) {
        dialogHtml += '<div class="btn">';
        if (settings.isShowBtnCancel) {
            dialogHtml += '<button class="btn btn-cancel">取消</button>';
        }
        dialogHtml += ' <button class="btn btn-sure">确定</button></div>';
    }
    dialogHtml += '</div></div>';

    var $dialog = $(dialogHtml).appendTo('body');

    // 为确定和取消按钮绑定事件处理程序
    $dialog.find('.btn-sure').on('click', function () {
        settings.confirmCallback();
        $dialog.remove(); // 关闭对话框
    });

    $dialog.find('.btn-cancel').on('click', function () {
        settings.cancelCallback();
        $dialog.remove(); // 关闭对话框
    });

    return $dialog;
}

调用

$('#tips').on('click', function () {
        // 提示
        myConfirm({
            title: '提示提示提示提示示',
            message: '描述信息描述信息描述信息描述信息描述信息描述信息',
            isShowBtn: true,
            isShowBtnCancel: false,
            confirmCallback: function () {              
              //确定回调
            },
            cancelCallback: function () {
            //取消回调
            }
        });
    });