js 实现提示框

最新推荐文章于 2024-05-13 04:24:42 发布

任平生01

最新推荐文章于 2024-05-13 04:24:42 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_47808670/article/details/125929866

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示一：

在这里插入图片描述

提示二：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 唤起弹框元素 -->
    <button id="open-toast">唤起提示框元素</button>
    <!-- 提示元素选择自己需要的种类，删除掉另一个即可 -->
    <!-- 提示元素：标题+提示内容+关闭按钮 -->
    <div class="toast"
        style="display: none;width: 300px;border: 1px solid white;padding: 5px 15px;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0px 0px 10px #d3d3d3;border-radius: 5px;">
        <h3 class="toast-title" style="text-align: left;margin: 0;padding: 0;">标题</h3>
        <div class="toast-content">白底黑字内容</div>
        <div style="display: flex;justify-content: flex-end;">
            <button class="toast-close"
                style="background-color:#3c91f7;padding: 5px 30px;border: none;border-radius: 3px;color: white;">知道了</button>
        </div>
    </div>
    <!-- 提示元素：只需要提示内容 -->
    <span class="toast"
        style="display: none;background-color: #7f7f7f;border-radius: 5px;padding: 8px 40px;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);border: none;opacity: 0.9;color: #dadada;text-align: center;">
        黑底白字内容</span>
    <script>
        document.querySelector('#open-toast').onclick = function () {
            document.querySelector('.toast').style.display = ''
            // // 2 s后自动关闭 自动关闭和手动点击关闭二选一
            setTimeout(() => {
                document.querySelector('.toast').style.display = 'none'
            }, 2000);

        }
        // 手动点击"我知道了"关闭 自动关闭和手动点击关闭二选一
        document.querySelector('.toast-close').onclick = function () {
            document.querySelector('.toast').style.display = 'none'
        }
    </script>
</body>

</html>