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:
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:
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
0