0

Tengo el siguiente código:

<script>
        let reached = false;
    window.addEventListener('scroll', () => {
        const scrollable = document.documentElement.scrollHeight - window.innerHeight;
        const scrolled = window.scrollY;

        if(!reached && Math.ceil(scrolled) >= Math.ceil(scrollable / 2)) {
            reached = true;
            alert("50%");
        }
    });
    </script>

Lo que hace es producir una alerta que se muestra al scrollear hasta el 50% de la página. Lo que me gustaría poder hacer el cambiar el alert por un modal dentro del cual se encuentre un iframe, pero no estaría pudiendo dar con el código adecuado.

2
  • utiliza los template-strings o la propiedad createElement() de js eso sirve para crear elementos e insertarlos en el DOM, investiga, intenta y luego vuelves si tienes problemas o dudas
    – Christian
    Commented el 24 may. 2021 a las 23:04
  • Probé algunas opciones pero no he podido. Mi conocimiento es muy básico para poder solucionarlo.
    – nicocarro
    Commented el 24 may. 2021 a las 23:38

2 respuestas 2

0

Podrias usar sweetalert2

Swal.fire({
    title: 'HOLA',
    // text:
    // html:
    // icon:
    // confirmButtonText:
    // footer:
    width: '100%',
    // padding:
    // background:
    // grow:
    // backdrop:
    // timer:
    // timerProgressBar:
    // toast:
    // position:
    // allowOutsideClick:
    // allowEscapeKey:
    // allowEnterKey:
    // stopKeydownPropagation:

    // input:
    // inputPlaceholder:
    // inputValue:
    // inputOptions:

    //  customClass:
    //  container:
    //  popup:
    //  header:
    //  title:
    //  closeButton:
    //  icon:
    //  image:
    //  content:
    //  input:
    //  actions:
    //  confirmButton:
    //  cancelButton:
    //  footer: 

    // showConfirmButton:
    // confirmButtonColor:
    // confirmButtonAriaLabel:

    // showCancelButton:
    // cancelButtonText:
    // cancelButtonColor:
    // cancelButtonAriaLabel:

    // buttonsStyling:
    // showCloseButton:
    // closeButtonAriaLabel:


    // imageUrl:
    // imageWidth:
    // imageHeight:
    // imageAlt:
});
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
 <script src="js/opciones.js"></script>
</body>

</html>

4
  • Tiene opción de permitirme agregar un iframe?
    – nicocarro
    Commented el 24 may. 2021 a las 23:36
  • Una vez que tenga todo bien en marcha, agregar el iframe en el modal es aún más fácil. Me refiero en el modal Commented el 24 may. 2021 a las 23:44
  • En la dulce alerta, alert sweet, también se puede agregar lo que quieras Commented el 24 may. 2021 a las 23:46
  • si podes agregar lo que quieras imput de todo entra en la parte configuracion y vesras todo hasta formularios podes hacer. Commented el 25 may. 2021 a las 1:02
0

Eso es muy fácil. Solamente tenés que tener todo el ecosistema de bootstrap y su modal desde aquí

Modificando tu código para agregar lo que te falta, ya estaría funcionando muy bien, si tenés bootstrap y el modal. A mí me funciona muy bien.

let reached = false;

window.addEventListener('scroll', () => {
    const scrollable = document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = window.scrollY;
    // AGREGA EL ID DE TU MODAL 
    const modal = document.getElementById("TUidModal")   

    if(!reached && Math.ceil(scrolled) >= Math.ceil(scrollable / 2)) {
        reached = true;
        //alert("50%");
        
        // Si no funciona con show, funcionará con toggle
modal.classList.toggle("show")
    }
});
3
  • Aplique los cambios pero sigue sin funcionarme... :(
    – nicocarro
    Commented el 25 may. 2021 a las 4:32
  • Entonces algo anda mal. Podés editar tu pregunta con más detalles y agrega nuevamente tu CSS y JavaScript con el HTML5. Cuando edita tu pregunta, atraerá más ayuda Commented el 25 may. 2021 a las 4:43
  • Yo trabajé con tu código y agregué la nuevas funciones que requería tu problema y me funcionó correctamente. Puede ser que algunas partes te aya perdido Commented el 25 may. 2021 a las 4:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.