"
Team:Linkoping Sweden/popup
From 2014.igem.org
(Difference between revisions)
| (14 intermediate revisions not shown) | |||
| Line 4: | Line 4: | ||
#mask { | #mask { | ||
position:absolute; | position:absolute; | ||
| + | top:0px; | ||
| + | left:0px; | ||
z-index:9000; | z-index:9000; | ||
background-color:#000; | background-color:#000; | ||
| Line 14: | 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 { | ||
| - | + | /* No customization atm */ | |
| - | + | } | |
| + | .window p { | ||
| + | color: #FFFFFF; | ||
} | } | ||
</style> | </style> | ||
| Line 30: | 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 36: | Line 41: | ||
var maskHeight = $(document).height(); | var maskHeight = $(document).height(); | ||
var maskWidth = $(window).width(); | 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 | //Set height and width to mask to fill up the whole screen | ||
| - | $('#mask').css({'width':maskWidth,'height':maskHeight}); | + | $('#mask').css({'width':maskWidth,'height':maskHeight,'left':horizOffset,'top':vertOffset}); |
//transition effect | //transition effect | ||
| - | $('#mask').fadeIn( | + | $('#mask').fadeIn(500); |
$('#mask').fadeTo("slow",0.8); | $('#mask').fadeTo("slow",0.8); | ||
| Line 47: | 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 52: | Line 65: | ||
//transition effect | //transition effect | ||
| - | $(id).fadeIn( | + | $(id).fadeIn(1000); |
}); | }); | ||
| Line 64: | 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
