Html绘制“成功、警告、错误”的消息提示

原创已于 2025-07-02 22:50:37 修改 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端 #vue

于 2025-03-05 14:57:59 首次发布

该文章已生成可运行项目，

Html绘制“成功、警告、错误”的消息提示

前言

使用html绘制效果如同Element的消息提示组件

一、效果展示

成功消息提示：
在这里插入图片描述

警告消息提示：
在这里插入图片描述

失败消息提示：
在这里插入图片描述

二、代码实现

1.提示弹窗

代码如下：

<!--  提示消息弹窗  -->
    <div id="msg-dialog" class="msgSucDialog">
        <div id="msgDiv" style="width: 100% ;display: flex;align-items: center;"></div>
    </div>

2.弹窗内容

成功提示弹窗：设置弹窗触发5秒后自动消失

// 提示信息
document.getElementById('msg-dialog').style.display = 'block';// 弹窗显示
document.getElementById('msg-dialog').removeAttribute("class");// 清除弹窗的样式
$('#msg-dialog').addClass('msgSucDialog');// 设置弹窗样式
$('#msgDiv').empty();// 清空弹窗内容
// 弹窗内容
let newsHtml = ''+
    '<img class="msgImg" src="../../assets/images/sussImg.png" />'+
    '<span class="msgInfoSucColor">退出登录成功！</span>'
// 将内容添加到页面上
$('#msgDiv').append(newsHtml );
// 弹窗倒计时-5秒后自动消失
let countdownCode = 5;
// 启动倒计时
let timer = setInterval(function() {
    countdownCode--;
    if (countdownCode <= 0) {
        document.getElementById('msg-dialog').style.display = 'none';// 弹窗隐藏
        clearInterval(timer); // 倒计时结束，停止计时
    }
}   , 1000); // 每秒执行一次   , 5000); // 每秒执行一次

警告提示弹窗

$('#msg-dialog').addClass('msgWarnDialog');
$('#msgDiv').empty();
let newsHtml = ''+
    '<img class="msgImg" src="../../assets/images/tipsImg.png" />'+
    '<span class="msgInfoWarnColor">请输入正确的格式</span>'

失败提示弹窗

$('#msg-dialog').addClass('msgFailDialog');
$('#msgDiv').empty();
let newsHtml = ''+
    '<img class="msgImg" src="../../assets/images/failImg.png" />'+
    '<span class="msgInfoFailColor">退出失败</span>'

3.弹窗样式

图片样式

.msgImg{
    width: 21px;
    height: 21px;
    padding-right: 15px
}

成功样式

.msgSucDialog {
    min-width: 360px;
    top: 11%;
    z-index: 2004; /* 确保遮罩在弹窗之上 */
    background-color: #f0f9eb;
    box-sizing: border-box;
    border: 1px solid #e1f3d8;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;
    padding: 15px 15px 15px 20px;
    display: none;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}
.msgInfoSucColor{
    color: #67c23a
}

警告样式

.msgWarnDialog {
    min-width: 360px;
    top: 11%;
    z-index: 2004; /* 确保遮罩在弹窗之上 */
    background-color: #fdf6ec;
    box-sizing: border-box;
    border: 1px solid #fdf6ec;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;
    padding: 15px 15px 15px 20px;
    display: none;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}
.msgInfoWarnColor{
    color: #E6A23C;
}

失败样式

.msgFailDialog {
    min-width: 360px;
    top: 11%;
    z-index: 2004; /* 确保遮罩在弹窗之上 */
    background-color: #fef0f0;
    box-sizing: border-box;
    border: 1px solid #fde2e2;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;
    padding: 15px 15px 15px 20px;
    display: none;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}
.msgInfoFailColor{
    color: #f56c56
}