[jQuery] pop-up By Buzzdungeon [Fixed]

</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").width()) /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;
}

<div class="canvas"></div>
<div class="popup">
   <div class="popup_close"></div>
   <p>Puedes cerrar el pop up haciendo clic en la X o haciendo clic fuera de el ;)</p>
   <p> También puedes moverlo arrastrándolo por la parte inferior</p>
   <p>By <a href="http://buzzdungeon.es.tl" target="_BLANK">Buzzdungeon</a></p>
   <div class="popup_drag"></div>
</div>