手写HTML提醒消息

一、创建提醒块

<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();
});

手写HTML提醒消息手写HTML提醒消息 LingDong Jey 发布了8 篇原创文章 · 获赞 0 · 访问量 971 私信 关注
上一篇:痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU硬件那些事(2.6)- 串行NOR Flash下载算法(MCUXpresso IDE篇)


下一篇:堆叠注入tips