Buzzdungeon - popup

Ver Demo

Css sin style tags

</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/39668621/buzzdungeon/popup/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript"> 
function popUp(){ 
   /*  EDITAR ESTAS VARIABLES */ 
   var ancho      = 300;    //tamaño de la anchura 
   var alto       = "auto"; //tamaño de la altura 
   var auto       = false;  //true = cerrado automatico 
   var timeIn     = 2000;   //tiempo de la animacion inicial 
   var timeOut    = 1500;   //tiempo de la animacion final 
   var time2Start = 1000;   //tiempo para que inicie el popup 
   var time2Read  = 3000;   //tiempo para ver el contenido (solo si alto = true) 
   /*  EDITAR ESTAS VARIABLES */

/* NO EDITAR DESPUES DE ESTO */ 
   var top = (($(window).height() - $(".popup").height())/2); 
   var left = (($(window).width() - $(".popup").height()*2) /2);

$(".popup").css({ 
      "top":top, 
      "left":left, 
      "width":ancho, 
      "height": alto 
   }); 
   setTimeout(function(){ 
      $(".canvas").css({ 
         "height":$(document).height(), 
         "width":$(document).width() 
      }); 
      $(".canvas").fadeIn(timeIn); 
      $(".popup").fadeIn(timeIn);

if(auto == true){ 
         setTimeout(function(){ 
            $(".popup").fadeOut(timeOut); 
            $(".canvas").fadeOut(timeOut); 
         },time2Read); 
      }

$(".popup_close , .canvas").click(function(){ 
         $(".popup").fadeOut(timeOut); 
         $(".canvas").fadeOut(timeOut); 
      });

},time2Start); 
   $( ".popup" ).draggable({ handle: ".popup_drag" }); 
} 
</script> 
<style type="text/css"> 
.popup{ 
   background-color:#000; 
   border:1px solid black; 
   -webkit-border-radius:10px; 
   -moz-border-radius:10px; 
   border-radius:10px; 
   -webkit-box-shadow:0 10px 20px 10px rgba(0,0,0,0.8), inset 0 0 1px rgba(255,255,255,0.7); 
   -moz-box-shadow:0 10px 20px 10px rgba(0,0,0,0.8), inset 0 0 1px rgba(255,255,255,0.7); 
   box-shadow:0 10px 20px 10px rgba(0,0,0,0.8), inset 0 0 1px rgba(255,255,255,0.7); 
   color:white; 
   display:none; 
   opacity:0.9; 
   padding: 10px; 
   position:fixed; 
   z-index:999; 
} 
.popup a{ 
   color:gold; 
} 
.popup_close{ 
   background:url("http://dl.dropbox.com/u/39668621/buzzdungeon/popup/close.png") no-repeat; 
   cursor:pointer; 
   float:right; 
   height:16px; 
   width:16px; 
} 
.popup_drag{ 
   background:url("http://dl.dropbox.com/u/39668621/buzzdungeon/popup/drag.png") no-repeat center; 
   border:1px dashed rgba(255,255,255,0.1); 
   cursor:move; 
   float:left; 
   height:20px; 
   width:100%; 
} 
.canvas{ 
   background:rgba(0,0,0,0.7); 
   display:none; 
   position:fixed; 
   top:0; 
   left:0; 
   z-index:998; 
}

Advertencia referente al campo de contenido (p.ej. Copyright)

¿Como hago que salga automaticamente?

Pega esto en Texto por encima de la pagina o en la pagina que quieres que salga

<script type="text/javascript"> 
   $(document).ready(popUp); 
</script>

¿Como hago que salga al darle clic a un enlace / imagen / etc?

Pega este código en la pagina donde quieras que aparesca o Texto por encima de la pagina

<img onclick="popUp()" src="URL DE LA IMAGEN" />

<a onclick="popUp()" href="#">Texto del enlace<a/>