调用时没有出现 Toastr 通知

Posted 2023-05-08

【中文标题】调用时没有出现 Toastr 通知

【英文标题】：Toastr notification not appearing when called

【发布时间】：2015-03-13 07:08:11

【问题描述】：

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

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

【问题讨论】：

请提供完整的 html 页面代码或提琴手演示或至少来自 chrome 开发者工具的错误

【参考方案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>

【讨论】：

它显示了，但什么也没显示，只是白色的弹出窗口，没什么好说的

@zolfaghari - 您应该作为单独的问题发布，而不是作为评论。

【参考方案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>

【讨论】：

代码不起作用。它也与 toastr 没有任何关系。