javascript - 如何将关闭按钮添加到 snackbar

Question

您好，我有一段代码可以生成 snackbar 。我使用带有关闭选项的 Bootstrap 警报来生成 snackbar ，但是当我单击关闭按钮时，它对我不起作用。是否可以添加关闭选项？如果是，你能解释一下吗？

function myFunction() {
        var x = document.getElementById("snackbar")
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 10000);
    }

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #1E6C97;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    right:20px;
    bottom: 40px;
    font-size: 17px;
}

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

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

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button onclick="myFunction()">Show Snackbar</button>
<div class="alert alert-info alert-dismissable fade in" id="snackbar">
	    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>&nbsp;&nbsp;Join [12531] Buyers from [181] Countries Who Connect with Suppliers on PaperIndex
	</div>

Answer 1

例如，我们可以添加 onclick 函数以从 snackbar 中删除 .show 类。查看工作示例。

// jQuery    
onClick="$(this).parent().removeClass('show');"
// pure JS
onClick="this.parentNode.classList.remove('show');"

function myFunction() {
        var x = document.getElementById("snackbar")
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1000000);
    }

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #1E6C97;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    right:20px;
    bottom: 40px;
    font-size: 17px;
}

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

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

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<button onclick="myFunction()">Show Snackbar</button>
<div class="alert alert-info alert-dismissable fade in" id="snackbar">
	    <a href="#" class="close" data-dismiss="alert" aria-label="close" onClick="this.parentNode.classList.remove('show');">&times;</a>&nbsp;&nbsp;Join [12531] Buyers from [181] Countries Who Connect with Suppliers on PaperIndex
	</div>