Snackbar样式的通知有时仅在Javascript/CSS中显示

当某些事件发生时，我的视图底部会出现一个“snackbar”通知

它大部分时间都有效，但有时不会显示出来

我基本上定义了一个隐藏的div，然后在调用javascript函数时通过一些动画使其可见。我传入文本和背景色。我正在使用W3Schools的代码，并对其进行了一些修改

我很难弄明白为什么有时候它不会出现

我已经在ChromeWeb工具中运行了它，并设置了一个断点和一个控制台日志。我得到了控制台lo和断点，在这里它将类设置为“show”，但我仍然看不到屏幕上的通知

我的z-Index设置为10，比代码中的任何其他视图都高9，所以没有理由它会隐藏在任何东西后面

我只是想听听其他方面的建议。代码如下：

这是在Meteor中，因此有一个用于通知的模板

<template name="snackbar">
    <div id="snackbar" class="snackbar shadow"></div>
</template>

以及调用时的javascript函数：

// This is called to display the snackbar notification

showSnackbar = function() {
    console.log("Snackbar got Called!");
    var snackbarText = Session.get("snackbarText");
    var snackbarColor = Session.get("snackbarColor");
    var snackbarNotification = document.getElementById("snackbar")
    snackbarNotification.innerHTML = snackbarText;
    snackbarNotification.style.backgroundColor = snackbarColor;
    snackbarNotification.className = "show";
    setTimeout(function() {
        snackbarNotification.className = snackbarNotification.className.replace("show", "");
    }, 7000);
}

首先，我从这个模板调用它，它显示：

<template name="entityManagement">
    <div id="manageEntities">
        <h3>Entity Management</h3>
        <div class="row">
            <div class="column column-40">
                {{> entityName}}
            </div>
            <div class="column column-40">
                {{> entityType}}
            </div>
            <div class="column">
                {{> addEntity}}
            </div>
        </div>

        <div class="row">
            <div class="column">
                <table>
                    <tr>
                        <th>
                            Entity Name
                        </th>
                        <th>
                            Entity Type
                        </th>
                        <th>
                            Entity Networks
                        </th>
                        <th>
                            Product(s)
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                    {{#each getCurrEntities}}
                        {{> entityTableInfo}}
                    {{/each}}
                </table>
            </div>
        </div>
    </div>
    <!-- The following template is hidden, and called when needed as a
    notificatioin to the user of some event outcome. -->
    {{> snackbar}}
    {{> entityNetworkForm}}
</template>

但是，如果我从该模板调用它…将不会显示：

<template name="productManagement">
    <div id="manageProducts">
        <h3>Product Management</h3>
        <div class="row">
            <div class="column">
                {{> productName}}
            </div>
            <div class="column">
                {{> productVersion}}
            </div>
            <div class="column column-20">
                <div id="addProductButton">
                    <br />
                    <button id="addProduct" class="button primary save"><i class="fa fa-plus-sign fa-fw myNav addProduct" aria-hidden="true"></i>&nbsp; Add Product</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <table>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Version
                        </th>
                        <th>
                            Added On
                        </th>
                        <th>
                            Added By
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                    {{#each productNames}}
                        {{> productListTable}}
                    {{/each}}
                    </table>
            </div>
        </div>
    </div>
    <!-- The following template is hidden, and called when needed as a
    notificatioin to the user of some event outcome. -->
    {{> snackbar}}
</template>

一如既往，我们非常感谢您的帮助

Meteor.call('Entities.insert', entityName, entityType, function(err, result) {
            if (err) {
                Session.set("snackbarText", "Error Inserting New Entity!");
                Session.set("snackbarColor", "red");
                showSnackbar();
            } else {
                Session.set("entity_id", result);
                Session.set("snackbarText", "New Entity Successfully Added!");
                Session.set("snackbarColor", "green");
                showSnackbar();
                $("#entityName").val('');
                $("#entityType").val('');
                var entityNetworkModal = document.getElementById("entityNetworkForm");
                entityNetworkModal.style.display = "block";
            }
        });

<template name="productManagement">
    <div id="manageProducts">
        <h3>Product Management</h3>
        <div class="row">
            <div class="column">
                {{> productName}}
            </div>
            <div class="column">
                {{> productVersion}}
            </div>
            <div class="column column-20">
                <div id="addProductButton">
                    <br />
                    <button id="addProduct" class="button primary save"><i class="fa fa-plus-sign fa-fw myNav addProduct" aria-hidden="true"></i>&nbsp; Add Product</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <table>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Version
                        </th>
                        <th>
                            Added On
                        </th>
                        <th>
                            Added By
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                    {{#each productNames}}
                        {{> productListTable}}
                    {{/each}}
                    </table>
            </div>
        </div>
    </div>
    <!-- The following template is hidden, and called when needed as a
    notificatioin to the user of some event outcome. -->
    {{> snackbar}}
</template>

'click #addProduct' (event) {
        event.preventDefault();
        var productName = $("#productName").val();
        var productVersion = $("#productVersion").val();

        var fullProductName = productName + "_" + productVersion;

        var countOfProductAndVersion = Products.find({ fullProductName: fullProductName }).count();

        if (countOfProductAndVersion > 0) {
            console.log("exists - you should see a snackbar....")
            // give an alert that the product name already exists
            Session.set("snackbarText", "Product Name Already Exists!");
            Session.set("snackbarColor", "red");
            showSnackbar();
        }
    },