JQuery - Centrar DIV en pantalla simulando POPUP

   
Vista:

Centrar DIV en pantalla simulando POPUP

Publicado por Diego (10 intervenciones) el 14/10/2013 05:12:27
Buen dia,

estoy simulado una capa la cual aparece como resultado de una peticion, estoy usando lo siguien:

1
2
3
4
5
6
7
<div id="capamensajes">
			<div id="contenidocapa">
				<div id="close"><img id="closeicon" src='../../imagenes/close-icon.png'></div>
				<div id="mensaje"></div>
				<div id="estado"></div>
			</div>
		</div>


1
2
3
4
5
6
7
#capamensajes{display:none;background-color:rgba(119,119,119,0.8);width:100%;height:100%;z-index:1001;position:fixed;top:0;left:0;}
#contenidocapa{text-align:center;background-color:#FFFFFF;width:40%;height:50%;border:2px solid rgba(23,122,40,0.5);border-radius:5px 5px 5px 5px;box-shadow: 0px 3px 8px #FFFFFF;}
#close{width:5%;height:10%;z-index:1004:position:absolute;float:right;}
#closeicon{width:100%;height:100%;cursor:pointer;}
#mensaje{width:80%;z-index:1003;}
#estado{width:20%;height:50%;z-index:1002;}
.estado{width:100%;height:100%;opacity:0.2;filter:alpha(opacity=20);}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function activarmensaje(){
	var capa = $('#capamensajes');
	capa.fadeIn(300);
	$("#contenidocapa").center(true);
	$("#estado").center(true);
	$("#mensaje").center(true);
	$("#closeicon").click(escondercapa);
}
 
function escondercapa(){
	var capa = $('#capamensajes');
	capa.fadeOut(300);
}
 
jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}



bien eso es lo que tengo explico cada div:
capamensaje: ocupa todo el espacio tanto de ancho como de alto de la pagina
contenidocapa: es un div mas pequeño que debe estar centrado en la pantalla
close: con una imagen pequeña que al hacer click esconde todas las capas
mensaje: lo que se genera como resultado de la peticion, puede ser un error o una confirmacion
estado: contendra una imagen.

todos los contenidos deberian estar centrados pero cuando aparece la capa por primera vez el mensajesale desubicado a la segunda vez si sale bien ubucado el problema creo que esta es por que no les estoy dando una altura definida a los divs, pero es lo que noq uiero es decir quiero poder centrar elementos sin necesidad de definirles dimension o bueno tal vez solo les defina la anchura pero no la altura ya que quiero que el div cresca dependiendo que tan grande sea el mensaje, o si conocen una manera mas facil de resolver eso de centrar elementos en al pantalla les agradeceria

adjuntos dos imagenes para ver el problema:


Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Centrar DIV en pantalla simulando POPUP

Publicado por monoculero (4 intervenciones) el 05/08/2014 00:10:48
Usa esta función en js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function centraVentana(ventana)
{
    //dimensiones de la ventana del cliente
    var anchoCliente = document.documentElement.clientWidth;
    var altoCliente = document.documentElement.clientHeight;
    ventana.css("position","absolute");
 
    //dimensiones de la ventana que nos llega
    var anchoVentana = ventana.width();
    var altoVentana = ventana.height();
 
    //centramos la ventana con los cálculos necesarios
    ventana.css("left",(anchoCliente-anchoVentana)/2);
    ventana.css("top",Math.max(10,(altoCliente-altoVentana)/2)+$(window).scrollTop());
}

El parámetro que recibe es un elemento jQuery, como puede ser $("div.miVentana")

Y luego para poner/quitar una capa oscura usa:

1
2
3
4
5
6
7
8
9
function ventana()
{
    $("div.ventana_fondo").remove();
    $("body").prepend("<div class='ventana_fondo' style='background-color: #333; top:0; left: 0;-moz-opacity:0.40; filter:alpha(opacity=40); opacity:0.40; position: fixed; width: 100%; height: 100%; z-index: 1'></div>");
}
function quitaVentana()
{
    $("div.ventana_fondo").remove();
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar