如何添加關閉按鈕到小吃店

Question

嗨，我有一段代碼來生成小吃店。我用bootstrap alert關閉選項來生成小吃店，但是當我點擊關閉按鈕不適合我時。它是否可以添加關閉選項？如果是的話，你能解釋一下嗎？

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"> 
 
\t  <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 
 
\t </div>

Answer 1

比如，我們可以添加的onclick函數從小吃吧刪除.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"> 
 
\t  <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 
 
\t </div>