Hola! Aquí les dejo un ejemplo de cómo mostrar un PopUP interno, al cargar la página, para eso, utilizamos 3 elementos importantes:

  • JavaScript
  • JQuery (Es un framework para JavaScript que nos facilita el trabajo de codificación, entre otras cosas nos permite hacer transiciones tipo fadeIn fadeOut en Alpha de Objetos, página oficial de JQuery)
  • CSS

Primero, debemos insertar las librerías de JQuery dentro de la etiqueta head del código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  <head>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
  </head>
</html>

El siguiente paso es definir algunos <div> en el código html dentro de la etiqueta body que vamos a utilizar para el ejemplo:

<body>
  <p>Aqui el contenido normal de la pagina</p>
  <div id="ventanaPopup1">
    <a id="ventanaPopup1Cerrar">x</a>
    <h1>Ejemplo de Popup Interno</h1>
    <p>
    Esto es una manera sencilla de mostrar información reelevante a los usuarios cuando entran a la página.
    <br/><br/>
    Incluso podemos mostrar popups para formularios, videos, imanenes, entre otras cosas
    <br/><br/>
    Click en X (superior-derecha) o Click fuera de la ventana para cerrar la popUp
    <br/><br/>
    <a href="http://www.nafiux.com">Nafiux</a>
    </p>
  </div>
  <div id="ventanaPopup1Fondo"></div>
</body>

Como pueden ver, utilizamos etiquetas div para estructurar la información, la etiqueta principal se llama ventanaPopup1 (este div tiene el contenido del popup) dentro tiene otro div llamado ventanaPopup1Cerrar (cuando el usuario de clic en este div, la popup será cerrada) y finalmente (fuera del div ventanaPopup1) tenemos a ventanaPopup1Fondo este div es el que ocupamos para poner el resto de la página en negro mientras cargamos el contenido.

El siguiente paso es configurar los estilos de los div (con css), este código es conveniente ponerlo dentro de la etiqueta <header>:

<style type="text/css">
#ventanaPopup1Fondo{
display:none;
position:fixed;
_position:absolute; /* caso especial para IE 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#ventanaPopup1{
display:none;
position:fixed;
_position:absolute; /* caso especial para IE 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#ventanaPopup1Cerrar{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
</style>

Las hojas de estilo en cascada (CSS) nos permiten diseñar etiquetas de código html fácilmente, si no estás muy familiarizado te recomiendo leer este manual de w3schools.

Es hora de configurar los eventos con JQuery, para eso, debemos insertar más codigo JavaScript dentro de la etiqueta header:

<script type="text/javascript">
//Configuramos el evento de carga de página, se ejecuta solamente 1 vez cuando la página cargo por completo
$(document).ready(function(){
  centraVentana();
  muestraVentana();
  //Agregamos el evento "click" del div: ventanaPopup1Cerrar
  $("#ventanaPopup1Cerrar").click(function(){
    ocultaVentana();
  });
  //Agregamos el evento "click" del div: ventanaPopup1Fondo
  $("#ventanaPopup1Fondo").click(function(){
    ocultaVentana();
  });
});

function centraVentana() {
	//Obtenemos ancho y alto del navegador, y alto y ancho de la popUp
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#ventanaPopup1").height();
	var popupWidth = $("#ventanaPopup1").width();
	//centering
	$("#ventanaPopup1").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});

	//Solo se necesita para IE6
	$("#ventanaPopup1Fondo").css({
		"height": windowHeight
	});
}

function ocultaVentana() {
	$("#ventanaPopup1Fondo").fadeOut("slow");
	$("#ventanaPopup1").fadeOut("slow");
}

function muestraVentana() {
	$("#ventanaPopup1Fondo").css({
		"opacity": "0.7"
	});
	$("#ventanaPopup1Fondo").fadeIn("slow");
	$("#ventanaPopup1").fadeIn("slow");
}
</script>

Les dejo el ejemplo completo de la página: JQuery_ventana_interna_cargar

ventanaPopup1