Team:Linkoping Sweden/popup

From 2014.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 16: Line 16:
     display:none;
     display:none;
     z-index:9999;
     z-index:9999;
-
     padding:20px;
+
     padding:20px 0px;
}
}
/* Customize your modal window here, you can add background image too */
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
#boxes #dialog {
-
    width:375px;
+
/* No customization atm */
-
     height:203px;
+
}
 +
.window p {
 +
     color: #FFFFFF;
}
}
</style>
</style>
Line 32: Line 34:
             //Cancel the link behavior
             //Cancel the link behavior
             e.preventDefault();
             e.preventDefault();
 +
            e.stopPropagation();
             //Get the A tag
             //Get the A tag
             var id = $(this).attr('href');
             var id = $(this).attr('href');
Line 39: Line 42:
             var maskWidth = $(window).width();
             var maskWidth = $(window).width();
             var horizOffset = ($(window).width() - 1100) / -2;
             var horizOffset = ($(window).width() - 1100) / -2;
-
       
+
            var vertOffset = -40;
 +
 
             //Set height and width to mask to fill up the whole screen
             //Set height and width to mask to fill up the whole screen
-
             $('#mask').css({'width':maskWidth,'height':maskHeight,'left':horizOffset });
+
             $('#mask').css({'width':maskWidth,'height':maskHeight,'left':horizOffset,'top':vertOffset});
              
              
             //transition effect         
             //transition effect         
-
             $('#mask').fadeIn(1000);     
+
             $('#mask').fadeIn(500);     
             $('#mask').fadeTo("slow",0.8);     
             $('#mask').fadeTo("slow",0.8);     
          
          
Line 50: Line 54:
             var winH = $(window).height();
             var winH = $(window).height();
             var winW = $(window).width();
             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
             //Set the popup window to center
             $(id).css('top', winH/2-$(id).height()/2);
             $(id).css('top', winH/2-$(id).height()/2);
Line 55: Line 65:
          
          
             //transition effect
             //transition effect
-
             $(id).fadeIn(2000);
+
             $(id).fadeIn(1000);
          
          
         });
         });
Line 67: Line 77:
          
          
         //if mask is clicked
         //if mask is clicked
-
         $('#mask').click(function () {
+
         $('#mask').click(function (e) {
 +
            e.preventDefault();
 +
            e.stopPropagation();
             $(this).hide();
             $(this).hide();
             $('.window').hide();
             $('.window').hide();

Latest revision as of 09:27, 16 October 2014