Toast

仔仔
CSS笔记
2023-05-04
1969热度
0评论

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

<head>
    <meta charset="UTF-8">
    <title>加载中...</title>
</head>

<body>
    <button onclick="t()">弹出toast</button>
    <script src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    var popToast = function() {}
    popToast.prototype = {
        timer: function(delay) {
            var t = null;
            clearTimeout(t);
            t = setTimeout(function() {
                $(".toast-msg").fadeOut(200, function() {
                    $(".toast-msg").remove();
                });
            }, delay);
        },
        toastMsg: function(content, position, delay) {
            var html = "";
            html = '<div class="toast-msg" style="position:fixed;margin:auto;padding:0.5rem 1.0rem;left:50%;bottom:1rem;transform: translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);border-radius:0.33rem;font-size:1.08rem;color:#fff;background:rgba(0,0,0,.6);z-index:999;"><p>' + content + '</p></div>';
            if (position == 'center') {
                html = '<div class="toast-msg" style="position:fixed;margin:auto;padding:0.5rem 1.0rem;top:50%;left:50%;transform: translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);border-radius:0.33rem;font-size:1.08rem;color:#fff;background:rgba(0,0,0,.6);z-index:999;"><p>' + content + '</p></div>';
            }
            $("body").append(html);
            popToast.timer(delay);
        },
        remove: function(ele) {
            $(ele).remove();
        }
    }
    var popToast = new popToast();

    function t() {
        popToast.toastMsg('message123456','center',2000);
    }
    </script>
</body>

</html>