Создание оверлейного окна с помощью jquery css (3) и HTML (5) - PullRequest
Новая
       10

Создание оверлейного окна с помощью jquery css (3) и HTML (5)

1 голос
/ 10 июня 2011

Я хочу создать эффект типа наложения (модальный) на моем веб-сайте, у меня уже есть один, работающий с фиксированной шириной и высотой, но я хочу, чтобы он занимал 85% доступного пространства экрана?

Как мне этого добиться?

Мой старый код выглядит так: 

$('#overlay').fadeIn('fast');
            $('#lightbox').css({
                    position:'fixed',
                    left: ($(window).width() - $('#lightbox').outerWidth())/2,
                    top: ($(window).height() - $('#lightbox').outerHeight())/2
            });

1 Ответ

3 голосов
/ 10 июня 2011

Вы хотите, чтобы наложение занимало 85% пространства экрана? Затем вам нужно рассчитать необходимую ширину / высоту и координаты х / у для этого. 

var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);   
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2;

$('#overlay').width(targetWidth);
$('#overlay').height(targetHeight);
$('#overlay').css({
    "position": "absolute", 
    "top": targetY+"px", 
    "left": targetX+"px"
});

Многие переменные назначения, вероятно, могут быть вырезаны, но оставлены для ясности.

...