Cacher is the code snippet organizer for pro developers

/* Pop Out Banner */
#trigger{
     position:fixed;
     top:0px;
     right:0px;
     width:40%;
     height:40px;
     z-index:10;
}

#popbox{
     position:fixed;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     background-color:#666666;
     z-index:20;
     display:none;
}
#interior{
     margin:40px auto 0px auto;
     width:400px;
     height:400px;
     background-color:#FFFFFF;
     border:3px #FF0000 solid;
     z-index:25;
}
.midlink{width:400px;margin:0px auto 0px auto;padding:15px 0px 0px 0px;}
.midlink a{
     font-family:Arial, Helvetica, sans-serif;
     font-size:22px;
     color:#ffffff;
     text-decoration:none;}
.midlink a:hover{color:#359aff;}
.midlink img{padding:0px 0px 0px 5px;margin-top:-4px;}
/* End Pop Out Banner */

<div id="trigger"></div>
<div id="popbox">
     <div id="interior">
          Wait, are you sure you wanne leave? <br>
          <a href="index.php" class="close">Close</a>
  </div>
</div>

<script language="javascript" type="text/javascript">
     var posX;
     var posY;
     var xdiff;
     var ydiff;
     var xold;
     var yold;
$(document).ready(function(){
          $("#trigger").mousemove(function(e){
                    posX = e.pageX;
                    posY = e.pageY;
                    xdiff = posX - xold;
                    ydiff = posY - yold;
                         if(ydiff < -2){$("#popbox").fadeIn(200);$('#trigger').hide();}
                    xold = posX;
                    yold = posY;});
          $(".close").click(function(){
               $("#popbox").hide(function(){$(this).unbind()});
          });
         

});
</script>