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
    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
    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/sweetalert2@11.0.11/dist/sweetalert2.all.min.js"></script>
 <script src="js/opciones.js"></script>
</body>

</html>

4
  • Tiene opción de permitirme agregar un iframe?
    – nicocarro
    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 el 24 may. 2021 a las 23:44
  • En la dulce alerta, alert sweet, también se puede agregar lo que quieras 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. 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
    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 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 el 25 may. 2021 a las 4:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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