首页 前端知识 css jquery右下角弹框提示框(工作需要就开发调式了)

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

2024-08-10 22:08:59 前端知识 前端哥 560 185 我要收藏

使用时调用:

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

效果图:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15267.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!