"
Team:Linkoping Sweden/popup
From 2014.igem.org
(Difference between revisions)
| (10 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 { | ||
| - | + | /* No customization atm */ | |
| - | + | } | |
| + | .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 = - | + | 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 | ||
| Line 45: | Line 48: | ||
//transition effect | //transition effect | ||
| - | $('#mask').fadeIn( | + | $('#mask').fadeIn(500); |
$('#mask').fadeTo("slow",0.8); | $('#mask').fadeTo("slow",0.8); | ||
| Line 51: | 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 56: | Line 65: | ||
//transition effect | //transition effect | ||
| - | $(id).fadeIn( | + | $(id).fadeIn(1000); |
}); | }); | ||
| Line 68: | 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
