手写HTML提醒消息

最新推荐文章于 2021-08-22 18:22:21 发布

LingDong Jey

最新推荐文章于 2021-08-22 18:22:21 发布

阅读量407

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/cyzl5/article/details/104454484

版权

前端技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、创建提醒块

<html>
	<body>
		<div class="tips"></div>
	</body>
</html>

二、css样式

/*提醒样式开始 wzj*/
.tips{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 200px;
    margin-left: -100px;
    z-index: 99999;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.tips-success{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.tips-info{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.tips-warning{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.tips-danger{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
/*提醒样式开始*/

js实现

$(":button").click(function(){
    //显示“保存成功”，等待2.5秒，渐变消失
    $(".tips").html("保存成功！").addClass("tips-success")
        .show().delay(2500).fadeOut();
});