如何通過底部彈出窗口關閉？

我在我的網站上創建了一個彈出窗口，使用HTML顯示屏幕底部的警報。這是一個很好的酒吧，但我無法弄清楚如何使它能夠被關閉。如果有人有任何想法，請幫助我。這是我到目前爲止有：如何通過底部彈出窗口關閉？

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;"> 
    <p><b>ATTENTION:</b> Text Here </p> 
</div>

來源

2016-02-12 Anthony Tesoriero

你是什麼意思？ – Sumit

你試過了什麼Javascript/jQuery？ –

您是否嘗試過更改div屬性'display'來隱藏div？順便說一句，你如何管理這個東西彈出，我的意思是如果彈出..它應該彈出和彈出，對吧？ –

使用onclick()事件和JavaScript函數：

function hide() { 
 
    document.getElementById('toolbar').style.display = 'none'; //gets the element and sets display to none 
 
}

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;"> 
 
     <p><b>ATTENTION:</b> Text Here </p> 
 
    <div onclick="hide();" style="text-align: center">&times;</div> 
 
</div>

或更容易：

<div onclick="document.getElementById('toolbar').style.display = 'none';">&times;</div>

來源

2016-02-12 14:53:15

的jQuery方法：
HTML：

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;"> 
    <p><b>ATTENTION:</b> Text Here </p> 
    <span id="close">x</span> 
</div>

的JavaScript：

<script> 
    $('#close').on('click', function() { 
    $('#toolbar').hide(); 
    }) 
</script>

純JavaScript方式：

<script> 
    document.getElementById("close").addEventListener("click", function(){ 
    document.getElementById("toolbar").style.display = 'none'; 
    }); 
</script>

您創建彈出裏面的「X」，並點擊時，它隱藏彈出。

來源

2016-02-12 14:55:34 MDD

如何通過底部彈出窗口關閉？

回答

相關問題