"

From 2014.igem.org

<style> /* Z-index of #mask must lower than #boxes .window */

1. mask {

   position:absolute;
   z-index:9000;
   background-color:#000;
   display:none;

}

1. boxes .window {

   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;

} /* Customize your modal window here, you can add background image too */

1. boxes #dialog {

   width:375px;
   height:203px;

} </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>

   $(document).ready(function() {    
       //select all the a tag with name equal to modal
       $('a[name=modal]').click(function(e) {
           //Cancel the link behavior
           e.preventDefault();
           //Get the A tag
           var id = $(this).attr('href');
       
           //Get the screen height and width
           var maskHeight = $(document).height();
           var maskWidth = $(window).width();
       
           //Set height and width to mask to fill up the whole screen
           $('#mask').css({'width':maskWidth,'height':maskHeight});
           
           //transition effect        
           $('#mask').fadeIn(1000);    
           $('#mask').fadeTo("slow",0.8);    
       
           //Get the window height and width
           var winH = $(window).height();
           var winW = $(window).width();
           //Set the popup window to center
           $(id).css('top', winH/2-$(id).height()/2);
           $(id).css('left', winW/2-$(id).width()/2);
       
           //transition effect
           $(id).fadeIn(2000);
       
       });
       
       //if close button is clicked
       $('.window .close').click(function (e) {
           //Cancel the link behavior
           e.preventDefault();
           $('#mask, .window').hide();
       });        
       
       //if mask is clicked
       $('#mask').click(function () {
           $(this).hide();
           $('.window').hide();
       });            
       
   });

</script>