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).
						
<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>
							
					
© IQSystems 2023