文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用单个Snackbar并转化为多个Snackbar

问如何使用单个Snackbar并转化为多个Snackbar
EN

Stack Overflow用户

提问于 2018-01-12 04:59:50

回答 1查看 1.2K关注 0票数 2

我发现这个很酷的snackbar，我可以在我的考试网站上使用，因为学习的原因。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar

这个snackbar使用ID，所以我必须复制粘贴CSS以及javascript。如果我想在同一个页面上复制4个不同的snackbar，那么我必须复制4次粘贴CSS代码.那会很烦人的。

下面是我设置多个snackbar的尝试。您可以在上面的链接中复制粘贴我的代码以查看结果。

正如您所看到的，效果可以工作，但是它丢失了CSS代码。有什么想法吗？

再次:在snackbar身份证..。我只是在创建框的布局，这样我就可以将snackbar更改为类.并有独特盒子的标识。

<!DOCTYPE html>
<html>
<head>
<style>
    .snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }

    .snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;} 
        to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

</style>
</head>

<body>

    <h2>Snackbar / Toast</h2>
    <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
    <p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>

    <button onclick="myFunction()">Show Snackbar</button>

    <div id="myUniqueBar" class="snackbar">Some text some message..</div>

    <script>
        function myFunction() {
            var x = document.getElementById("myUniqueBar")
            x.className = "show";
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
    </script>

</body>
</html>

snackbar

javascript

html

css

toast

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-12 06:53:16

因为在使用以下代码时，要删除现有的snackbar类：

x.className = "show";

相反，用以下代码替换上面的代码：

x.classList.add("show");

代码链接： https://codepen.io/anon/pen/KZRJmP

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48219807

复制

相似问题

问如何使用单个Snackbar并转化为多个Snackbar
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用单个Snackbar并转化为多个SnackbarEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用单个Snackbar并转化为多个Snackbar
EN