封装弹窗带输入内容的拿来即用

css：

.dialogBack {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.6);
}

.tck {
    width: 62%;
    background-color: #fff;
    text-align: center;
    align-content: center;
    position: fixed;
    font-family: 'SimHei', serif;
    left: 20%;
    top: 25%;
    color: #393937;
}

.topDiv {
    height: 37%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.closeIm {
    width: 45px;
    height: 40px;
    margin-right: 40px;
}

.topnum {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 89px;
    font-size: 2.6rem;
    margin-left: 30px;
    padding-top: 17px;
    /*position: relative;*/
}

.topnum img {
    /*position: absolute;*/
    /*left: 159px;*/
    /*top: 26px;*/
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.sc {
    width: 80%;
    color: #202020;
    line-height: 36px;
    font-size: 2.6rem;
    text-align: center;
    margin: 25px 0;
}

.contenT {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenT textarea {
    text-align: left;
    border: solid 1px black;
    border-radius: 20px;
    resize: none;
    box-sizing: border-box;
    padding: 2% 0 0 1%;
    line-height: 3rem;
    height: 14rem;
}

.but1 {
    height: 145px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn1 {
    width: 36%;
    height: 42%;
    font-size: 1.8rem;
    background-color: #e5e5e5;
    color: #222222;
    border: none;
}

.btn2 {
    width: 36%;
    height: 42%;
    margin-left: 29px;
    font-size: 1.8rem;
    background-color: #202020;
    color: #fbfbfb;
    border: none;
}

 

js：

/**
 * 带输入内容的，确认，取消的弹窗
 * @param content 弹出内容
 * @param btnok 是否显示按钮
 * @param btncanel
 * @param btnCallBack 点击按钮的回调函数，true/false
 */
function popupName(content, btnok, btncanel, btnCallBack) {
    let btnOkShow = "block";
    let btnCanelShow = "block";
    if (null == btnok || "" == btnok) {
        btnOkShow = "none";
    }
    if (null == btncanel || "" == btncanel) {
        btnCanelShow = "none";
    }
    let str = '<div id="tipDialog" class="dialogBack" data-tag="">\n' +
        '    <div class="tck">\n' +
        '        <div class="topDiv">\n' +
        '            <div class="topnum">\n' +
        '                 <img src="../../assets/US/icon/tips.png"  alt="">' + content + '\n' +
        '            </div>\n' +
        '            <img class="closeIm" src="../../assets/US/buttons/close.png" id="closeTip"  alt="">\n' +
        '        </div>\n' +
        '\n' +
        '        <div class="contenT"><input type="text" id="input_content" onkeyup="checkLen(this)" style="border:1px solid; width:60%;height:4vh;"  id="dialogContent" class="sc"/></div>\n' +
        '        <div class="but1">\n' +
        '            <input id="cancleButton" style="display: ' + btnCanelShow + '" type="button" class="btn1"   value="' + btncanel + '">\n' +
        '            <input id="sureButton" style="display: ' + btnOkShow + '" type="button" class="btn2"  value="' + btnok + '">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '</div>';
    $("body").append(str);
    let str1 = document.querySelector('.dialogBack');
    str1.style.display = "block";
    $("#closeTip").click(function () {
        $("#tipDialog").remove();
        const result = { "code": false, "msg": "" };
        if (null != btnCallBack) {
            btnCallBack(result);
        }
    })
    $("#sureButton").click(function () {
        const msg = $("#input_content").val();
        // if(isEmpty(msg)){
        //     alert("")
        // }
        $("#tipDialog").remove();
        const result = { "code": true, "msg": msg };
        if (null != btnCallBack) {
            btnCallBack(result);
        }
    })
    $("#cancleButton").click(function () {
        $("#tipDialog").remove();
        const result = { "code": false, "msg": "" };
        if (null != btnCallBack) {
            btnCallBack(result);
        }
    })
}

//限制input中文字数
function checkLen(obj){
    var maxChars = 8;//最多字符数
    if (obj.value.length > maxChars){
        obj.value = obj.value.substring(0,maxChars);
    }
}