2012-02-25 16 views
7

En este momento estoy ajuste de la posición de la ventana de jQuery modal de esta manera:Establecer la ventana emergente para centro de jQuery

var winH = $(window).height(); 
    var winW = $(window).width(); 
    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

¿Cómo centrar la ventana emergente cuando me desplazo hacia abajo?

Respuesta

8

Se podía utilizar otro estilo CSS, tratar position: fixed

1

Suponiendo que está utilizando la interfaz de usuario de diálogo jQuery, the default position is 'center' que se centra en el área de visualización por defecto. Si está utilizando una ventana modal jQuery diferente, entonces:

$(id).css({ 
    'position': 'fixed', 
    'top': parseInt((winH/2) - ($(id).height()/2), 10) 
    'left': parseInt((winW/2) - ($(id).width()/2), 10) 
}); 

podría hacer el truco. No estoy seguro de lo que quiere decir con "desplazarse hacia abajo" como un diálogo modal y desplazarse (fuera del cuadro de diálogo) son mutuamente excluyentes.

5

puede utilizar esto en esta forma

// cuadro modal Posición en el centro de la página

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", (jQuery(window).height() - this.height())/2+jQuery(window).scrollTop() + "px"); 
    this.css("left", (jQuery(window).width() - this.width())/2+jQuery(window).scrollLeft() + "px"); 
    return this; 
    } 

// luego llamar a la función

jQuery(".modal-profile").center(); 

y esto hará su código organizado y fácil de usar en cualquier proyecto para centrar el modal. se puede ver este tipo de trabajo en otra pregunta

modal appears on page load

3

Éste me es ayudado!

$.fn.center = function() { 
    this.css("position", "fixed"); 
    this.css("top", ($(window).height()/2 - this.height()/2) + "px"); 
    this.css("left", ($(window).width()/2 - this.width()/2) + "px"); 
    return this; 
} 

Y utilícelo como se describe.

$ (". Modal-window"). Center();

Cuestiones relacionadas