js+css消息提示框

vener__

已于 2025-03-19 15:40:55 修改

阅读量147

点赞数 2

分类专栏： JavaScript 文章标签： javascript css 开发语言

于 2024-11-14 11:33:53 首次发布

本文链接：https://blog.youkuaiyun.com/vener_/article/details/143764044

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

第一种，简洁居中黑色提示框

script

function showMessage(message) {
        // 获取轻提示框元素
        var messagePopup = document.createElement('message-popup');
        messagePopup.textContent = message;
        messagePopup.className = 'message-popup';

        // 设置轻提示框的文本内容
        messagePopup.textContent = message;

        document.body.appendChild(messagePopup);
        // 显示轻提示框
        messagePopup.classList.add("show");

        // 设置一个定时器，在一定时间后（这里是3秒）隐藏轻提示框
        setTimeout(function () {
            messagePopup.classList.remove('show');
        }, 3000);
    }

css

/* 轻提示框的基本样式 */
        .message-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            z-index: 999;
        }

        /* 当轻提示框显示时的样式 */
        .message-popup.show {
            display: block;
        }

第二种，右上角蓝色带i图标，鼠标悬浮到上边之后不会自动消失

示例代码

<!DOCTYPE html>
<html>

<head>
    <title>Toastr 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>

<body>
    <button id="show-toast">显示轻提醒</button>
    <script>
        document.getElementById('show-toast').addEventListener('click', function () {
            toastr.info('这是一个轻提醒消息！');
        });
    </script>
</body>

</html>