﻿
function showWindow()
{
var id= '#dialog';
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);
}


    $(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();
      });
  
  });
  
  
  /////////////////////
  ////////////////////
   
  
