how to close popup form automatically?
Question
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. 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 answers
solution1
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. More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
solution2
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.