Toast in Web，页版Toast实现。

最新推荐文章于 2025-06-22 21:58:11 发布

清风徐来qfxl

最新推荐文章于 2025-06-22 21:58:11 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android HTML5 文章标签： web Toast

本文链接：https://blog.youkuaiyun.com/xuyonghong1122/article/details/75353857

Android 同时被 2 个专栏收录

44 篇文章

订阅专栏

HTML5

5 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个简单的Web版Toast提示框。适用于需要在H5页面中展示临时消息的情况。

如何在网页弹出一个Toast

前言:
在如今H5与原生交互越来越多的情况下,大部分情况下,吐司的功能都可以由客户端原生来实现,但是在有些特殊的情况下会需要页面来弹出一个吐司,这篇博客记录如何通过html css js实现一个Web版的吐司

效果图。

这里写图片描述

1,html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>Toast Demo</title>
    </head>
    <link href="toast.css" rel="stylesheet" />
    <style>
        body{
            text-align: center;
            margin-top: 100px;
        }
        input{
            width: 100px;
            height: 40px;
            background: #333333;
            border: none;
            color: white;
            outline:none
        }

        input:enabled:active{
            background: gainsboro;
            border: none;
            outline:none;
            color: white;       
        }
    </style>
    <body>
        <input type="button" value="show Toast" onclick="showToast()"/>
    </body>
    <script src="Toast.js"></script>

    <script>    
        function showToast() {
            Toast.toast("Hello");   
        }
    </script> 

</html>

css

.toast-container {
    position: fixed;
    z-index: 9999;
    bottom: 50px;
    width: 100%;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    opacity: 0
}

.toast-container.toast-active {
    opacity: 1
}

.toast-message-container {
    font-size: 14px;
    width: 170px;
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    color: #333;
    border-radius: 7px;
    background-color: #d8d8d8
}

js

var Toast = {};
Toast.toast = function(msg) {
    var active = "toast-active";
    var div = document.createElement("div");
    div.classList.add("toast-container")
    div.innerHTML = '<div class="toast-message-container">' + msg + "</div>"
    div.addEventListener("webkitTransitionEnd", function() {
        div.classList.contains(active) || div.parentNode.removeChild(div)
    });
    document.body.appendChild(div)
    div.offsetHeight
    div.classList.add(active)
    setTimeout(function() {
        div.classList.remove(active)
    }, 1500)
}