VENTANA SEUDOMODAL AUTOCENTER
Para que aparezca una seudomodal centrada definimos la funcion centrar y luego
on click del objeto y de la seudomodal. También se puede activar en la carga
Atencion a id= #zoom que es la caja si no se le da position=absolute top=0 left=0 aunque invisible aumenta el tamaño de la ventana innecesariamente. frame sirve para el ajuste de tamaño inicial de la seudomodal y sombra para anular y oscurecer la página hasta el cierre de la ventana (función seudo-modal).
Es importante remarcar que para que funcione correctamente .heigh tiene que estar declarado el DOCTYPE por ejemplo para HTML5 <!DOCTYPE html>
Atencion a id= #zoom que es la caja si no se le da position=absolute top=0 left=0 aunque invisible aumenta el tamaño de la ventana innecesariamente. frame sirve para el ajuste de tamaño inicial de la seudomodal y sombra para anular y oscurecer la página hasta el cierre de la ventana (función seudo-modal).
Es importante remarcar que para que funcione correctamente .heigh tiene que estar declarado el DOCTYPE por ejemplo para HTML5 <!DOCTYPE html>
<script>
$(document).ready(function(){
jQuery.fn.center = function () {
var coef=0.30; //porcentaje de alto para centrado
this.css("position","absolute");
this.css("top", Math.max(0, ((($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop())*coef ) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
return this;
}
jQuery.fn.cargar = function () {
$("#caja").center(); //centra la caja
$("#caja").css("visibility","visible"); //hace visible caja
$("#sombra").css("height", $(document).height()); //a la sombra le da la altura del doc.
$("#sombra").css("width", $(document).width()); //a la sombra le da el ancho del doc.
$("#sombra").css("visibility","visible"); //hace visible la sombra
}
//Eventos en la carga, pueden ir en un click u otro evento
$("#caja").cargar(); //carga la caja
//fin de eventos
$( window ).resize(function() {
$("#caja").center(); //recentra la caja despues de cambio de ancho de ventana
$("#sombra").css("height", $(document).height()); //a la sombra le da la nueva altura del doc .
$("#sombra").css("width", $(document).width()); //a la sombra le da el nuevo ancho del doc.
});
$("#caja").click(function(evento){
evento.preventDefault();
$("#caja").css("visibility","hidden"); //las dos lineas hacen desaparecer la patalla y la caja
$("#sombra").css("visibility","hidden");
evento.preventDefault();
});
$("#boton").click(function(evento){
//evento.preventDefault();
$("#caja").cargar();
});
});
</script>
<style>
/* Estilos necesarios para el popup*/
.popup{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
width:50%;
height:auto;
border: #996600 solid 2px;
background-color: #fff; /*color de fondo del popup*/
opacity: 0.60; /*controla la transparencia del popup*/
display:block;
visibility:hidden;
z-index:101;
position:absolute;
left:0;
top:0;
cursor: pointer;
border-radius: 20px;
}
.contenido{
padding: 10px;
padding-top: 50px;
padding-bottom: 20px; /*controla el padding bottom extra*/
}
.pantalla{
width:10px;
height:10px;
background-color: #000000;
opacity: 0.8; /*controla el oscurecimiento de la página*/
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
visibility:hidden;
}
.cerrar{
text-align: right;
width:18%;
float:left;
/*background-color: rgb(255, 0, 242);*/
}
#titulo{
text-align: center; /* volvemos en....*/
width:80%;
float:left;
padding-left: 2%;
padding-top: 20px;
color: #487144;
}
.close{
width: 45px;
}
.loguito{
float:left;
}
.textito{
float:left; /* felices vacaciones*/
text-align: center;
padding-left: 20%;
color:#126D08;
}
@media screen AND (max-width:800px ) {
.popup{
width:80%;
}
.textito{
padding-left: 0;
font-size: 1.3rem;
}
.contenido{
padding-top: 20px;
}
}
</style>
</head>
<body>
<div style="height:600px; margin:0 auto; margin-top:100px; text-align:center;">
<div id="boton">
<a href="#">CONTENIDO DE LA PÁGINA (click para cargar el seudomodal)</a>
</div>
<!-- FIN página ******************************************************************************************* -->
</div>
<!-- caja seudomodal -->
<div id="caja" class="popup">
<div id="titulo" >
Volvemos en marzo<br>
con las ventas y talleres
</div>
<div id="cerrar" class="cerrar">
<img class="close" src="tec-java-seudomodal-prototipo.png" />
</div>
<div style="clear:both"></div>
<div id="texto" class="contenido" >
<div class="loguito" >
<img src="tec-java-seudomodal-prototipo-logo.png" />
</div>
<div class="textito">
<div style="margin-bottom:5px;" >Felices vacaciones</div>
IQsystems
</div>
<div style="clear:both"></div>
</div>
</div>
<!-- FIN caja seudomodal -->
<!-- sombra -->
<div id="sombra" class="pantalla">
</div>
<!--FIN sombra -->
</body>