调用时没有出现 Toastr 通知

Question

我尝试了以下代码，但在浏览器中启动页面时没有弹出任何内容

$(function () { //ready
    toastr.info('For more information, see our FAQ guide located below.');
});

Answer 1

如果您的页面中包含了 jQuery、toastr.js、和 toastr.css，那么这应该可以工作。我会确保检查这些脚本的路径是否都正确，并检查控制台是否有任何错误。

<script src="/example-path-to/jquery-2.1.4.js"></script>
<script src="/example-path-to/toastr.js"></script>
<link href="/example-path-to/toastr.css" rel="stylesheet" />

<script>
      $(function () { //ready
          toastr.info('If all three of these are referenced correctly, then this should toast should pop-up.');
      });
</script>

Answer 2

Jquery Toast 类型通知弹窗设计简单的方式enter code here

$('button').click(function () {
            $('.alert').addClass("show");
            $('.alert').removeClass("hide");
            $('.alert').addClass("showAlert");
            setTimeout(function () {
                $('.alert').removeClass("show");
                $('.alert').addClass("hide");
            }, 5000);
        });
        $('.close-btn').click(function () {
            $('.alert').removeClass("show");
            $('.alert').addClass("hide");
        });

<STyle>
        @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

        * {
            margin: 0;
            padding: 0;
            user-select: none;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        button {
            padding: 8px 16px;
            font-size: 25px;
            font-weight: 500;
            border-radius: 4px;
            border: none;
            outline: none;
            background: #187900;
            color: white;
            letter-spacing: 1px;
            cursor: pointer;
        }

        .alert {
            background: #ffdb9b;
            padding: 20px 40px;
            min-width: 420px;
            position: absolute;
            right: 0;
            top: 10px;
            border-radius: 7px;
            border-left: 8px solid #ffa502;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .alert.showAlert {
            opacity: 1;
            pointer-events: auto;
        }

        .alert.show {
            animation: show_slide 1s ease forwards;
        }

        @keyframes show_slide {
            0% {
                transform: translateX(100%);
            }

            40% {
                transform: translateX(-10%);
            }

            80% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-10px);
            }
        }

        .alert.hide {
            animation: hide_slide 1s ease forwards;
        }

        @keyframes hide_slide {
            0% {
                transform: translateX(-10px);
            }

            40% {
                transform: translateX(0%);
            }

            80% {
                transform: translateX(-10%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        .alert .fa-exclamation-circle {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #ce8500;
            font-size: 30px;
        }

        .alert .msg {
            padding: 0 20px;
            font-size: 18px;
            color: #ce8500;
        }

        .alert .close-btn {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            background: #ffd080;
            padding: 20px 18px;
            cursor: pointer;
        }

        .alert .close-btn:hover {
            background: #ffc766;
        }

        .alert .close-btn .fas {
            color: #ce8500;
            font-size: 22px;
            line-height: 40px;
        }
    </STyle>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Login</button>
    <div class="alert hide">
        <span class="fa fa-exclamation-circle"></span>
        <span class="msg">Warning: This is a warning alert!</span>
        <div class="close-btn">
            <span class="fa fa-times"></span>
        </div>
    </div>