如何自動關閉彈出表單？

Question

我在基於 html 的網站中有一個彈出表單，在彈出表單中有三個選項，如果我單擊第一個選項，則會轉到該特定部分，但彈出表單仍然存在。如果我單擊關閉，則表單將關閉。但我如果我訪問特定部分，希望自動關閉。 下面是我的代碼。 網站圖片

 <html> <body> <.-- popup form start here --> <div id="popScroll"> <div class="popScroll"> <div class="popup"> <div id="option"> <.-- <a href="index2.html" id="home" class="boxi">Home</a> --> <.-- <a href="#" id="close" class="boxi closei">Close</a> --> <.-- <button class="btn" id ="close-btn"> Close </button> --> <div class="text"> <a href="#"><img src="demo.png" alt=""></a><br> <a href="#">Chemical</a> </div> <div class="text"> <a href="#logistics" on><img src="demo.png" alt="logistics"></a><br> <a href="#logistics">logistics</a> </div> <div class="text"> <a href="#polymer"><img src="demo.png" alt="polymer"></a><a href="#polymer">Polymer</a> </div> <.-- <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" class="boxi">Close</span> --> </div><br><br> <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" >Close</span> </div> </div> </div> </body></html>

Answer 1

我不確定您要實現什么目標，但我假設您想在向下滾動到站點中的某個部分時關閉彈出窗口？

為此，您可以使用 Intersection Observer。 更多信息在這里： https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Answer 2

您可以做的是在用戶單擊選項后使用單擊偵聽器和關閉模式在選項上添加單擊功能。

// NOTE: choose appropriate id according to your code

const popup = document.querySelector('#popup'); // id is popup id
const first = document.querySelector('#first'); // first is id of first option

first.addEventListener('click', function sectionClickListeners() {
  // Perform some tasks...
  popup.style.display = 'none';
})

這個網站很好地理解了模態的使用，並給出了不同的例子。 https://jquerymodal.com/

如何自動關閉彈出表單？

問題描述

2 個解決方案

解決方案1
1 2020-12-30 11:35:40

解決方案2
1 2020-12-30 11:45:04

如何自動關閉彈出表單？

問題描述

2 個解決方案

解決方案1 1 2020-12-30 11:35:40

解決方案2 1 2020-12-30 11:45:04

解決方案1
1 2020-12-30 11:35:40

解決方案2
1 2020-12-30 11:45:04