Is there a way to prevent a link to load until the pop-up closes?

Question 1

i have setted up this pop-up, but i need to prevent any link to load until the visitor clicks on the accept button, but i can’t make it work

that’s my document body with the js code, if theres a way to do that i would be really grateful

<body>
    <!-- Agrega más secciones según sea necesario -->
    <!-- Popup -->
    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close-button" onclick="closePopup()">&times;</span>
            <p>Este es un mensaje de confirmación antes de ir a otra sección.</p>
            <button onclick="closePopup()">Aceptar</button>
        </div>
    </div>

    <script>
        // Función para mostrar el popup
        function showPopup(linkHref) {
            const popup = document.getElementById("popup");
            const popupContent = document.querySelector(".popup-content");
            
            // Configurar el enlace al que se dirigirá después de cerrar el popup
            popupContent.querySelector("button").onclick = function () {
                window.location.href = linkHref;
            };
            
            popup.style.display = "block";
        }
        
        // Función para cerrar el popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }
        
        // Agrega un evento click a los enlaces de navegación
        const navLinks = document.querySelectorAll("summary");
        navLinks.forEach((link) => {
            link.addEventListener("click", (event) => {
                event.preventDefault(); // Evita la navegación predeterminada
                const linkHref = link.getAttribute("href"); // Obtén el destino del enlace
                showPopup(linkHref); // Muestra el popup y guarda el destino del enlace
            });
        });
    </script>
</body>
</html>

i’ve tried to stop the loading with the event.preventDefault(); function but it didn’t worked

Question 2

You can use bufferisation to disable/enable every document links.

class LinksEnabler{
  
  constructor(){
    this.enabled=true;
    this.buffer=[];
  }
  enable(){
    if(!this.enabled){
      this.enabled=true;
      this.buffer.forEach(d=>{
        d.dom.href=d.href;
      });
      this.buffer=[];
    }
  }
  disable(){
    if(this.enabled){
      this.enabled = false;
      this.buffer  = Array.from(document.querySelectorAll('a'))
      .map(dom=>{
        const obj={dom,href:dom.href};
        dom.href="#";
        return obj;
      })
    }
  }
}

const linksEnabler=new LinksEnabler();

<a href="https://duckduckgo.com/" target="_blank">duckduckgo</a>
<br/>
<a href="https://wikipedia.org/" target="_blank">wikipedia</a>
<hr/>
<button onclick='linksEnabler.disable()'>disable links</button>
<button onclick='linksEnabler.enable()'>enable links</button>

Question 3

try to put the link in a “data-” attribute (not in a href) for example

<a class="summary" href="javascript:;" data-href="https://google.com">Go to Google</a>

the js

 const navLinks = document.querySelectorAll(".summary");
        navLinks.forEach((link) => {
            link.addEventListener("click", () => {
                const linkHref = link.dataset.href; // get link via data-href attribute
                document.getElementById('accept-btn').setAttribute("href", linkHref); // set the link to the accept button in the pop-up dialog
            });
        });

the pop-up

<div id="popup" class="popup">
        <div class="popup-content">
            <span class="close-button" onclick="closePopup()">&times;</span>
            <p>Este es un mensaje de confirmación antes de ir a otra sección.</p>
            <a id="accept-btn" href="">Aceptar</a>
        </div>
    </div>

Leave a Comment Cancel reply