Question 245221 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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</button>
        </div>
    </div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search