I have successfully implemented a pop-up on my website, but I am facing an issue where I need to prevent any linked pages from loading until the visitor clicks on the accept button. However, I am struggling to make it function as intended.
Below is the snippet of my document body along with the JavaScript code. If anyone has a solution to this problem, I would greatly appreciate it.
<body>
<!-- Add more sections as needed -->
<!-- Popup -->
<div id="popup" class="popup">
<div class="popup-content">
<span class="close-button" onclick="closePopup()">×</span>
<p>This is a confirmation message before navigating to another section.</p>
<button onclick="closePopup()">Accept</button>
</div>
</div>
<script>
// Function to display the popup
function showPopup(linkHref) {
const popup = document.getElementById("popup");
const popupContent = document.querySelector(".popup-content");
// Set up the link to navigate to after closing the popup
popupContent.querySelector("button").onclick = function () {
window.location.href = linkHref;
};
popup.style.display = "block";
}
// Function to close the popup
function closePopup() {
document.getElementById("popup").style.display = "none";
}
// Add click event to the navigation links
const navLinks = document.querySelectorAll("summary");
navLinks.forEach((link) => {
link.addEventListener("click", (event) => {
event.preventDefault(); // Prevent default navigation
const linkHref = link.getAttribute("href"); // Get the link destination
showPopup(linkHref); // Display the popup and save the link destination
});
});
</script>
</body>
</html>
I attempted to use the event.preventDefault(); function to stop the loading, but unfortunately, it did not work as expected.