-2

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

1

2 Answers 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>

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</a>
        </div>
    </div>
8
  • would it also work with the data-link attribute? the website im gonna add the pop-up is using that attribute Sep 12 at 1:12
  • Yes it should also work, Its up to you to use any name, the data-href is not some kind of spesific keyword
    – fajar wz
    Sep 12 at 1:21
  • Let me try and i'll let you know, thanx in advance Sep 12 at 1:23
  • It didnt worked tho, I'm trying to add this pop-up on a shopify website, maybe that's causing some issues? For the structures of the links i mean Sep 12 at 14:04
  • sorry, if you copy-paste my accept button there is a closing tag mismatch. Ensure the closing tag is </a> not </button>. I have edited my answer just now
    – fajar wz
    Sep 12 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.