jq 对话框

代码

js

var _Alert_Wintop=true;//是否在最顶层显示
var _Alert_Top;//css top属性

/*
输入对话框
_title=标题
t1=的一个文本框的提示文字
t2=的二个文本框的提示文字
ok=确定按钮执行方法，必传
回调参数1  输入值数组
*/
$.alertInput2 = function (_title,t1,t2, ok) {
    if (!ok) {
        console.error('没有确定事件执行的方法！');
        return;
    }

    var $box=$('<div></div>');
    var $input = $('<input type="text" placeholder="'+t1+'" />');
    var $input2 = $('<input type="text" placeholder="'+t2+'" />');

    $box.append($input);
    $box.append('<br />');
    $box.append('<br />');
    $box.append($input2);

    var r = false;
    var box=$.alertWarning($box, _title || '请输入', function () {
        if (ok) {
            ok([$input.val(),$input2.val()]);
        }
    });
    return box;
}

/*
输入对话框
_title=标题
val=验证值
ok=确定按钮执行方法，必传
回调参数1  验证结果
回调参数2  输入值
*/
$.alertInput = function (_title, val, ok) {
    if (!ok) {
        console.error('没有确定事件执行的方法！');
        return;
    }

    var $input = $('<input type="text" />');
    var r = false;
    var box=$.alertWarning($input, _title || '请输入', function () {
        if ($input.val() == val) {
            r = true;
        }
        if (ok) {
            ok(r,$input.val());
        }
    });
    return box;
}

/*
输入对话框
_title=标题
ok=确定按钮执行方法，必传
回调参数1  输入值
*/
$.alertTxt = function (_title, ok) {
    if (!ok) {
        console.error('没有确定事件执行的方法！');
        return;
    }

    var $input = $('<textarea rows="5"></textarea>');
    var r = false;
    var box=$.alertWarning($input, _title || '请输入', function () {
        if (ok) {
            ok($input.val());
        }
    });
    return box;
}

/*
警告对话框
_content=内容
_title=标题
ok=确定按钮执行方法，必传
no=取消按钮执行方法
*/
$.alertWarning = function (_content, _title, ok, no) {
    if (!ok) {
        console.error('没有确定事件执行的方法！');
        return;
    }
    var box=$.alert(_content, 'warning', _title || '警告！', ok, (no || function () {}));
    return box;
}

/*
错误对话框
_content=内容
_title=标题
*/
$.alertError = function (_content, _title) {
    var box=$.alert(_content, 'error', _title || '错误！');
    return box;
}

/*
成功对话框
_content=内容
_title=标题
*/
$.alertSuccess = function (_content, _title) {
    var box=$.alert(_content, 'success', _title || '成功！');
    return box;
}

/*
默认对话框
_content=内容
type=类型  success，error，warning
_title=标题
ok=确定按钮执行方法
no=取消按钮执行方法，传入就会显示取消按钮
*/
$.alert = function (_content, type, _title, ok, no) {
    var shadow = $('<div class="x-alert-shadow"></div>');
    var box = $('<div class="x-alert-box ' + type + ' hide"></div>');
    var content = $('<div class="x-alert-content"></div>');
    var btns = $('<div class="x-alert-btns"></div>');

    if(_Alert_Top){
        box.css('top',_Alert_Top);
    }
    content.html(_content);

    if (no) {
        var btn_no = $('<button>取消</button>');
        btn_no.click(function () {
            $.alertClose(box);
            if (no) {
                no();
            }
        });
        btns.append(btn_no);
    }

    var btn_OK = $('<button>确定</button>');
    btn_OK.click(function () {
        $.alertClose(box);
        if (ok) {
            ok();
        }
    });

    if (_title) {
        var title = $('<div class="x-alert-title">' + _title + '</div>');
        box.append(title);
    }

    btns.append(btn_OK);
    box.append(content);
    box.append(btns);
    shadow.append(box);
    if(_Alert_Wintop){
        $(window.top.document.body).append(shadow);
    }else{
        $('body').append(shadow);
    }
    setTimeout(() => {
        box.removeClass("hide");
    }, 10);
    return box;
}

/*
关闭
t=指定关闭哪一个  不传默认关闭全部
*/
$.alertClose = function (t) {
    if (!t) {
        $('.x-alert-box').addClass("hide");
        setTimeout(function () {
            $('.x-alert-shadow').remove();
        }, 300);
    } else {
        $(t).addClass("hide");
        setTimeout(function () {
            $(t).parent('.x-alert-shadow').remove();
        }, 300);
    }
}

css

.x-alert-shadow {
    width: 100vw;
    height: 100vh;
    display: inline-block !important;
    background: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999999999;
}

.x-alert-box {
    display: inline-block;
    background: #fff;
    box-shadow: 0px 0px 10px #bbb;
    width: 300px;
    border-top: 5px solid #0099ff;
    position: fixed;
    top: 200px;
    left: calc((50vw - 150px));
    transition: 0.3s;
    background: #fff !important;
}

.x-alert-content {
    max-height: 300px;
    overflow: auto;
    box-sizing: border-box;
}

.x-alert-content input,textarea {
    box-sizing: border-box;
    width: 100%;
    border: solid 1px #ccc;
    /* height: 2em; */
    padding:5px 10px;
    border-radius: 0px !important;
    margin: 0px !important;
    outline: none;
}

.x-alert-box>div {
    padding: 10px;
}

.x-alert-btns {
    text-align: right;
}

.x-alert-btns button {
    border: none;
    display: inline-block;
    padding: 5px 15px;
    margin-left: 10px;
    color: #fff;
    background: #0099ff;
    cursor: pointer;
}

.x-alert-box.error {
    border-top: 5px solid #ff0022;
}

.x-alert-box.error .x-alert-title {
    color: #ff0022;
}

.x-alert-box.error .x-alert-btns button {
    background: #ff0022;
}


.x-alert-box.success {
    border-top: 5px solid #66ce05;
}

.x-alert-box.success .x-alert-title {
    color: #66ce05;
}

.x-alert-box.success .x-alert-btns button {
    background: #66ce05;
}


.x-alert-box.warning {
    border-top: 5px solid #ee8828;
}

.x-alert-box.warning .x-alert-title {
    color: #ee8828;
}

.x-alert-box.warning .x-alert-btns button {
    background: #ee8828;
}


.x-alert-box.hide {
    transform: scale(1.2);
    opacity: 0;
}

使用

		//参数：内容，类型，标题，确定方法，取消方法
        $.alert("这是一个默认的对话框");

        //参数：内容，标题
        $.alertSuccess("执行成功！");

        //参数：内容，标题
        $.alertError("执行失败！触发了xxxx异常");

        //参数：内容，标题，确定方法，取消方法
        $.alertWarning("你确定要怎么搞？", null, function () {
            $.alert("警告对话框必须有确定方法");
        });


        //参数：标题，确定值，确定方法
        $.alertInput("请输入 `123`", '123', function (r,val) {
            if (r) {
                $.alertSuccess('你输入了123')
            } else {
                $.alertError('你没输入123,你输入的是'+val)
            }
        });


        //参数：标题，确定方法
        $.alertTxt("请输入", function (val) {
            $.alertError('你没输入123,你输入的是' + val)
        });


        //参数：标题，值1，值2，确定方法
        $.alertInput2("请输入","请输入值1","请输入值2", function (val) {
            console.log(val)
        });

        //关闭所有对话框
        $.alertClose();

        
        _Alert_Wintop=true;//是否在最顶层窗口显示
        _Alert_Top="10px";//与窗口顶部的距离

效果

默认

成功

错误

警告

输入

2个输入框输入

文本域