Box Modal con javascript, css y ajax

Crearemos un box modal, es decir una ventana que visualizará contenido (utilizando Ajax cargaremos el contenido desde otras páginas) y dejara la página "bloqueada" hasta que se cierre la ventana. El fondo se pondrá ligeramente opaco (exploradores compatibles como firefox, IE, Opera a partir de la versión 9, safari, etc.). Esta ventana se centrara en la zona de la página y dispone de 3 botones el primero para reducirla otro para ampliarla y el último para cerrarla

ver ejemplo

Tan solo ocupa 5 Kb, el archivo CSS 1 Kb y el archivo javascript (incluye la función ajax para visualizar datos desde otras páginas) 4 Kb

CSS code

#capafade{
	padding:0; 
	margin:left; 
	border:0; 
	width:100%; 
	height:100%; 
	background:#000000; 
	position:absolute; 
	opacity: .5;
	filter: alpha(opacity=50);
	top:0; 
	z-index:30;
	visibility:hidden;
}
#boxmodal{	
	position:absolute; 
	padding:5px; 
	visibility:hidden; 
	top:0; 
	background:#eee; 
	z-index:35;
	border:2px solid #990000;
}
#boxclose{
	text-align:right; 
	width:100%; 
	padding:0;
	padding-bottom:5px;
	border-bottom:1px solid #ccc;
}
#boxcontent{
	overflow:auto; 
	width:100%; 
	height:250px;
}
#panelbox{
	background:#f4f4f4;
	padding:5px;
}
#boxmodal a{ text-decoration:none; color:#990000;}
#boxmodal a:active{color: #888;}
#boxmodal a:hover{color: #FF0000;}

JAVASCRIPT code

function leer(doc){
	sendDatos(doc,'boxtext',true);			 
}

function closeBox(){
	document.getElementById("capafade").style.visibility = "hidden";
	document.getElementById("boxmodal").style.visibility = "hidden";
	document.getElementById("capafade").style.display = "none";
	document.getElementById("boxtext").innerHTML = "";
}

function maxBox(){						
	var box = document.getElementById("boxmodal");
	var content = document.getElementById("boxcontent");
	content.style.height= getHeight() - ((getHeight()*10)/100) +'px';	
	content.style.fontSize= '12px';		
	box.style.width= '90%';	
	box.style.height= "90%";
	box.style.left = "5%"; 
	box.style.top = getTop();		
}

function minBox(){						
	var box = document.getElementById("boxmodal");
	var content = document.getElementById("boxcontent");
	content.style.height= getHeight() - ((getHeight()*55)/100) +'px';	
	content.style.fontSize= '11px';	
	box.style.width= '50%';	
	box.style.height= '50%'; 
	box.style.left = "25%"; 
	box.style.top = getTop();	
}

function getTop(){
	var h =   window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	var alto = getHeight();
	var box = document.getElementById("boxmodal");	
	return (h+(alto/2))- (box.offsetHeight/2) + "px";
}

function getHeight(){
	if(window.innerHeight){//navegadores de mozilla
		return  window.innerHeight
	}else{//navegadores de IE
		return  document.documentElement.clientHeight;
	}
}

	
function openBox(doc,maxWin){			
	initCapaFade(doc);	
	box = document.getElementById("boxmodal");	
	box.style.visibility = "visible";		
	leer(doc);
	if(maxWin)maxBox();
	else minBox();
}

function initCapaFade(doc){
	var d = document.body;
	var alturaIframe = d.scrollHeight +  (d.offsetHeight - d.clientHeight);	
	var box = document.getElementById("capafade");
	box.style.height = alturaIframe + "px";		
	box.style.visibility = "visible";
	box.style.display = "";
	box.style.width = "100%";
	box.style.top='0px';
}

//metodo que lee los campos de un formulario y crea un ruta get al file pasado y lo abre en el box
function enviarAjax(frm,file){	
	var count = document.forms[frm].elements.length;
	var path = file;	
	var s="?";
	for(n=0;n<count;n++){		
		if(n>0)s="&";
		if(document.forms[frm].elements[n].type=="checkbox"){
			if(document.forms[frm].elements[n].checked){
				path = path+s+document.forms[frm].elements[n].name + "=" + document.forms[frm].elements[n].value;			
			}
		}else path = path+s+document.forms[frm].elements[n].name + "=" + document.forms[frm].elements[n].value ;
		
	}	
	openBox(path);
}

function hideLoad(){
	document.getElementById("capafade").style.visibility = "hidden";	
	document.getElementById("capafade").style.display = "none";
	sendDatos("", "capafade",true);
}

function moveBox(){
	var box = document.getElementById("boxmodal");
	if(box.style.visibility=="visible")box.style.top = getTop();
}

//ajax
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function sendDatos(datos, resultado,borrar){	
	divResultado = document.getElementById(resultado);			
	if(divResultado.innerHTML=='' || borrar){
		ajax = objetoAjax();
		if(datos!=""){
			divResultado.innerHTML = "<span id='loading'>Loading...</span>";		
			ajax.open("GET", datos);
			ajax.onreadystatechange=function() {
				if (ajax.readyState==4) {
					divResultado.innerHTML = ajax.responseText
				}
			}
			ajax.send(null);
		}else divResultado.innerHTML ="";
	}
}

HTML code

<html>
<head>
<title>DEMO BOX MODAL</title>
	<link rel="stylesheet" type="text/css" href="box_modal.css"/>
	<script type="text/javascript" src="box_modal.js"></script>
	<style type="text/css">
		body {margin:auto;padding:0;}
	</style>
</head>
<body onscroll="moveBox();">
<center>
<h1>TITULO DE PRUEBA</h1>
<p>texto de prueba</p>
<a href="javascript:openBox('demo_contenido.html',false);">ver ejemplo</a>
</center>

<!-- DIV PARA EL BOX MODAL AL FINAL DEL BODY-->
<div id="capafade"></div>
<div id="boxmodal">	
	<div id="boxclose" ondblclick="maxBox();"><a href="javascript:minBox();">[-]</a> | <a href="javascript:maxBox();">[+]</a> | <a href="javascript:closeBox();">[X]</a></div>
	<div id="boxcontent"><div id="boxtext"></div></div>	
</div>
</body>
</html>

Analizando el archivo HTML

No es nada complejo implementar este box modal y es compatible con los navegadores más utilizados como (IE 6,7. la familiza de Mozilla (firefox, chrome) Safari (windows y mac), Opera, etc)

1- Entre la etiquetas head solo se añaden los archivos box_modal.css y box_modal.js

2- En la etiqueta body se añade onscroll="moveBox();". Con esto haremos que cuando el usuario haga escroll, el box modal se reubique automaticamente en el centro.

3- <a href="javascript:openBox('demo_contenido.html',false);">ver ejemplo</a>: llamamos al función javascript que abre el box modal. Se le pasa el parametro del archivo que se desea visualizar dentro del box modal, y un booleano (true o false) para ver el box modal pequeño o grande (true=grande).

4- Al final y antes del cirre de la etique body se incluye el código html con los divs que formarán el box modal.

Descargar ejemplo completo

descargar ejemplo