实用的jquery html css提示弹框，不影响其他页面布局

一个实用的jquery+html+css提示弹框，可以放在html中的任何位置，不影响页面布局

下图为样式预览：

html部分

<div class="toast" id="toast">
    <div class="toast-title">提示</div>
    <div class="toast-content"></div>
    <div class="toast-footer">
        <button class="toast-cancel" onclick="alertToastCancel()">取消</button>
        <button class="toast-close" id="toast-close">确认</button>
    </div>
</div>

css部分

.toast {
    width: 400px;
    border: 1px solid white;
    padding: 5px 15px;
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px #d3d3d3;
    border-radius: 5px;
    background-color: #fff;
    display: none;
    z-index: 999999;
}

    
.toast-title {
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

.toast-content {
    color: #666;
    margin-top: 10px;
}

.toast-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.toast-close {
    background-color:#3c91f7;
    padding: 5px 20px;
    border: none;
    border-radius: 4px;
    color: white;
}

.toast-cancel {
    background-color:#f56c6c;
    padding: 5px 20px;
    border: none;
    border-radius: 4px;
    color: white;
    margin-right: 10px;
}

js部分

// 开启提示弹框
function alertToast (data) {
    var res = {
        "content": data.content ? data.content : '',
        "url": data.url ? data.url : '',
    }
    $(".toast-content").text(res.content)
    var obj = document.getElementById('toast-close')
    obj.setAttribute("onclick","alertToastCancel('"+ res.url +"')")
    $("#toast").css("display", "block")
}

// 关闭提示弹框
function alertToastCancel (url="") {
    $("#toast").css("display", "none")
    if (url != "" && url != null && url != undefined) {
         window.top.location.href = url
    }
}

调用

alertToast({
  content: "请登录", // 提示信息
  url: "login.html"  // 跳转url(可不传)
})