0

Estoy realizando un ejercicio de para colocar una ventana popup utilizando el metodo de window.open, pero creo que estoy realizando mal el calculo y la ventana me aparece un poco mas hacia la derecha.

En concreto, seria que la ventana quedara justo en el medio con 1/4 del tamaño de la pantalla, esta seria la pagina numero 2, la cual tengo en un html externo.

// obtenemos el tamaño dinamico y lo divimos en 4, obteniendo 1/4 de la panatalla.
        var height = (parseInt(window.innerHeight) /4);
        var width =  (parseInt(window.innerWidth) /4);
        // calculo de la ventana
        var x=(screen.width/2)-(width/2);
        //Ajustar verticalmente
        var y=(screen.height/2)-(height/2);
        // definimos una variable
        var v1;
        // inicializamos un función de apertura de la ventana
        function abrirVentana() {
            v1 = window.open('pagina2.html', 'PopUp',
                'scrollbars=yes ' +
                'width=' + width + ' ' +
                'height=' + height + ' ' +
                'top=' + (window.screenTop + (y - (height / 2))) + ' ' +
                'left=' + (window.screenLeft + (x- (width / 2)))
            )
        
            v1.document.write('<h1>Apertura de la pagina 2<h1>');
            setTimeout(function () {
                window.location = "pagina3.html";
                v1.close();
            }, 3000);

        }

1 respuesta 1

0

Antes de desarrollar la solución, piensa en el algoritmo, ¿Qué necesitas?

Requisito: Que la ventana mida 1/4 de la pantalla (o la ventana padre)
Solución: tamaño de ventana padre / 4

Requisito: Que la nueva ventana quede centrada
Solución: La suma de márgenes externos iguales más ancho de ventana debe ser igual al ancho total de pantalla (o ventana padre)

  • Ancho de ventana = Ancho de pantalla / 4
  • Espacio disponible = Ancho de pantalla - Ancho de ventana
  • Márgenes izquierdo y derecho = Espacio disponible / 2
  • Aplicar misma fórmula para márgenes verticales

Conviene hacerlo primero en "papel":

// Suponiendo que la pantalla mide 1024 x 768
width = 1024 / 4 // 256
height = 768 / 4 // 192

// Calcular ancho disponible (Ancho de pantalla - ancho de ventana)
a = 1024 - width // 768 
// Calcular márgenes horizontales (posición horizontal de la ventana)
x = a / 2 // 384
// 384 margen izquierdo + 256 ancho de ventana + 384 margen derecho = 1024
// En un solo paso: x = (1024 - width) / 2

// Calcular altura disponible
b = 768 / height // 576
// Calcular márgenes verticales (posición vertical de la ventana)
y = b / 2  // 288
// 288 margen superior + 192 alto de ventana + 288 margen inferior = 768
// En un solo paso: y = (768 - height) / 2

Ya está el algoritmo, ahora hay que programarlo:

    // Obtenemos el tamaño dinamico y lo divimos en 4, obteniendo 1/4 de la panatalla.
    var height = (parseInt(window.innerHeight) / 4);
    var width = (parseInt(window.innerWidth) / 4);

    // Ajuste horizontal
    var x = parseInt((screen.width - width) / 2);
    // Ajustae vertical
    var y = parseInt((screen.height - height) / 2);
    // Variable para la nueva ventana
    var v1;
    // inicializamos un función de apertura de la ventana
    function abrirVentana() {
        // No es necesario realizar más cálculos
        // Basta con incluir las variables donde corresponde
        v1 = window.open('pagina2.html', 'PopUp',
            `scrollbars=yes
            width=${width}
            height=${height}
            top=${y}
            left=${x}`
        );
    
        v1.document.write('<h1>Apertura de la pagina 2<h1>');
        setTimeout(function () {
            window.location = "pagina3.html";
            v1.close();
        }, 3000);
    }

Nota: En lugar de concatenar las opciones, puedes usar plantillas de cadena de texto para facilitar la lectura del código.

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.