css+jquery右下角弹框提示框(工作需要就开发调式了)

发布时间 2023-12-28 11:22:29作者: 爱跳舞的程序员

使用时调用:

addTip();
setTimeout("closeTip();",1000);
setTimeout("removeTip();",2000);

 

//添加提示框
function addTip() {
    var tip = "    <div  id='tip'>"+
    "    <div class='tip-header'>提示信息"+
    "    <span style='margin-left: 150px;text-decoration: none;'><a href='javascript:void(0);' onclick='closeTip()'>x</a></span>"+
    "  </div>"+
    "    <div class='tip-body'>操作成功</div>"+
    "    </div>";
      $('body').append(tip);
}
//关闭提示框
function closeTip() {
    $("#tip").css("-webkit-transform","translate(0, 400px)");
}
//移除提示框
function removeTip() {
    $("#tip").remove();
}
js代码

 

/* 提示框样式 开始 */
#tip {
    border: 1px solid #E8E8E8;
    border-radius: 2%;
    background-color: #b8f4bc;
    /*         position: absolute;
    top: 8%;
    left: 15%; */
    position: fixed;
    /*     width: 400px;
    height: 400px; */
    width: 250px;
    height: 200px;
    right: 2%;
    bottom: -400px;
    -webkit-transition: all 3s;
    -webkit-transform: translate(0, -400px);
    z-index: 999;
}

.tip-header {
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #E8E8E8;
    color: #333;
    background: #67aaf0;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
}

.tip-body {
    padding: 50px 50px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}
/* 提示框样式 结束 */
css

 

效果图: