CODEWITHSUNDEEP
javascriptjquerycssdom-manipulation
Udders
Udders

Reputation: 259

Making an overlay window with jquery css(3) and HTML(5)

I am looking to create an overlay effect (modal) type effect on my website, I have one working already that is a fixed width and height, but I want it to fill 85% of the available screen space?

How can I achieve this?

My old code looks like this, 

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

Upvotes: 1

Views: 1058

Answers (1)

Mick Hansen
Mick Hansen

Reputation: 2704

You want the overlay to fill 85% of the screen space? Then you need to calculate the required width/height & x/y coordinates for that.

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"
});

Alot of the variable assignments could probably be cut out, but left them in for clarity.

Upvotes: 3

Related Questions