Toastr JS出现在源代码中但不可见

Question

我正在尝试使用 Toastr JS，最初我无法弄清楚为什么它不会出现但它确实出现了（通过将超时更改为 10 分钟并查看源代码来弄清楚）但它是不可见的而且我有不知道为什么。它出现在所有内容的下方而不是右上方。

我的模板代码

{% block javascript %}
{% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script> toastr.success("{{ message }}")</script>
            {% elif message.tags == 'info' %}
                <script> toastr.info("{{ message }}")</script>
            {% elif message.tags == 'warning' %}
                <script> toastr.warning('{{ message }}")</script>
            {% elif message.tags == 'error' %}
                <script>
                toastr.options = {
                closeButton: false,
                debug: false,
                newestOnTop: false,
                 progressBar: true,
                 positionClass: "toast-top-right",
                 preventDuplicates: false,
                 onclick: null,
                 showDuration: "9000",
                 hideDuration: "1000",
                 timeOut: "0",
                 extendedTimeOut: "1000",
                 showEasing: "swing",
                 hideEasing: "linear",
                 showMethod: "fadeIn",
                 hideMethod: "fadeOut"
                }
                toastr.error("{{ message }}")

            </script>
            {% endif %}
        {% endfor %}
{% endif %}
{% endblock %}

Answer 1

问题出在

 <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="text/css" media="all">

需要替换为

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" media="all">

additional: One MUST always use standard JQUERY when using Toastr JS(min version of Jquery is not compatible with Toastr)

Toastr JS出现在源代码中但不可见

Toastr JS appears in source code but is invisible

html

javascript

django

toastr

bootstrap-4