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

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

下图为样式预览：

html 部分

    
 提示 
    

    

         取消 
         确认 
    

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(可不传)
})