使用jQuery实现消息提示框-优快云博客

本文链接：https://blog.youkuaiyun.com/Zheng_xinle/article/details/123918866

本文介绍了如何利用JavaScript库jQuery创建消息提示框。在实际应用中，需要先引入jQuery库，然后通过文中提供的JS代码调用来显示不同类型的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function showMessage(message, type, time) {
    let str = ''
    switch (type) {
        case 'success':
            str = '<div class="success-message" style="width: 300px;height: 40px;text-align: center;background-color:#daf5eb;;color: rgba(103,194,58,0.7);position: fixed;left: 50%;top: 5%;margin-left:-150px;margin-top:-20px;line-height: 40px;border-radius: 5px;z-index: 9999">\n' +
                '    <span class="mes-text">' + message + '</span></div>'
            break;
        case 'error':
            str = '<div class="error-message" style="width: 300px;height: 40px;text-align: center;background-color: #f5f0e5;color: rgba(238,99,99,0.8);position: fixed;left: 50%;top: 10%;line-height: 40px;margin-left:-150px;margin-top:-20px;border-radius: 5px;;z-index: 9999">\n' +
                '    <span class="mes-text">' + message + '</span></div>'
    }
    $('body').append(str)
    setTimeout(function () {
        $('.' + type + '-message').remove()
    }, time)
}

以上就是写好的js代码，使用时需要引入jquery，通过下面的方法调用提示框：

showMessage('添加成功','success',1000)

效果如下
在这里插入图片描述

jq消息提示框