Team:Linkoping Sweden/popup

<html>
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
    position:absolute;
    top:0px;
    left:0px;
    z-index:9000;
    background-color:#000;
    display:none;
}
#boxes .window {
    position:fixed;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px 0px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
/* No customization atm */
}
.window p {
    color: #FFFFFF;
}
</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();
            e.stopPropagation();
            //Get the A tag
            var id = $(this).attr('href');
        
            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            var horizOffset = ($(window).width() - 1100) / -2;
            var vertOffset = -40;

            //Set height and width to mask to fill up the whole screen
            $('#mask').css({'width':maskWidth,'height':maskHeight,'left':horizOffset,'top':vertOffset});
            
            //transition effect        
            $('#mask').fadeIn(500);    
            $('#mask').fadeTo("slow",0.8);    
        
            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();
            if($(id).height() > winH) {
                $(id).css('height', winH);
            }
            if($(id).width() > winW) {
                $(id).css('width', winW);
            }
            //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(1000);
        
        });
        
        //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 (e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).hide();
            $('.window').hide();
        });            
        
    });
</script>
</html>