我創建了一個 html 站點，用戶可以在其中輸入文本輸入中的代碼，然后如果滿足某些條件，則將此代碼插入到 MYSQL 資料庫中。如果資料庫條目成功，我想通過一個小的彈出訊息通知用戶，該訊息顯示“成功”之類的內容，并說明表行中的一些資料，代碼已插入。
我在以下頁面上發現了一個漂亮的彈出訊息，我想使用它：https : //www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/。
但是，在從頁面實作中，彈出視窗是通過單擊按鈕觸發的：
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
我想根據 if 條件執行彈出視窗，在其中檢查是否已設定 php 變數：
<?php
if (isset($group)) {
?> ......HTML code.....
那么，誰能告訴我如何成功洗掉彈出視窗的“onClick”功能？
提前致謝！
uj5u.com熱心網友回復：
我知道您在將資料插入資料庫后重新加載頁面？
如果是這樣，您最初可以做什么來顯示彈出視窗，只需將 class 添加active到您的彈出視窗（帶有 class 的元素popup，如下所示：
<div class="popup center active">
...
</div>
但
為了能夠關閉彈出視窗，您仍然需要附加所提供腳本的第二部分（您可以簡單地將其插入script到 phpif陳述句內的標簽中（在 HTMLbody元素的末尾），例如：
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
注意：它不會改變事實，如上所述 - 最好用XHR處理這個問題（例如通過 ajax）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329256.html
標籤：javascript html 查询 css 弹出
下一篇：對齊到頁面的中心