如何自动关闭弹出表单？
[英]how to close popup form automatically?
问题描述
I have a popup form in html based website,in popup form there are three options,if I click on first option then it goes to that particular section,but popup form remains there.if I click on close then form will close.but I want automatically form close if I visit particular section.
我在基于 html 的网站中有一个弹出表单，在弹出表单中有三个选项，如果我单击第一个选项，则会转到该特定部分，但弹出表单仍然存在。如果我单击关闭，则表单将关闭。但我如果我访问特定部分，希望自动关闭。 below is my code.下面是我的代码。 Picture of the website网站图片
<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>
2 个解决方案
解决方案1
1 2020-12-30 11:35:40
I'm not exactly sure what you are trying to achieve but I assume you want to close a popup whenever you scroll down to a certain section within your site?我不确定您要实现什么目标，但我假设您想在向下滚动到站点中的某个部分时关闭弹出窗口？
To achieve this, you could use the Intersection Observer.为此，您可以使用 Intersection Observer。 More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
解决方案2
1 2020-12-30 11:45:04
What you can do is add click functionality on options using click listener and close modal after a user clicks on options.您可以做的是在用户单击选项后使用单击侦听器和关闭模式在选项上添加单击功能。
// 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';
})
This website gives a good understanding of using modals and gives different examples.这个网站很好地理解了模态的使用，并给出了不同的例子。 https://jquerymodal.com/ https://jquerymodal.com/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.