Question

I created a light box from scratch in JQuery, it works well, My problem is that when you click what you want to pop up, it pops up on an absolute position on the page, so if you’re scrolled all the way to the bottom and click on something, you have to scroll all the way up to see what popped up. Here’s my CSS… the element’s postion is the class of “outer”:

.outer{
    display:none; 
    width:770px; 
    height:475px; 
    top:25%; 
    left:17.5%; 
    position:absolute;
    z-index:3; 

}
.inner{
    width:750px; 
    height:450px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px;
    z-index:4;
}


.exit_button{ 
    float:right;
    z-index:6;
    cursor: pointer;
}
.inner_content{
    display:none;
    z-index:99;
 }
.next{
    cursor: pointer; 
    margin-left:240px; 
}

.previous{
    cursor: pointer; 
    margin-left:275px;
}

Here’s my JQuery in case this needs to be done in JQuery:

$(document).ready(function() {
    $('.button1').click(function() {
        var get_id = $(this).attr('id');        
        var current = $('#div_pic_'+get_id);
        current.show();         
        if (current.is(':last-child')) {
            $('.next').prop('disabled', true);
            $('.previous').prop('disabled', false);
        }
        else if (current.is(':first-child')) {
            $('.previous').prop('disabled', true);
            $('.next').prop('disabled', false);

        }
        else
        {
            $('.next').prop('disabled', false);
            $('.previous').prop('disabled', false);
        }

        $('.outer').fadeIn(750);        
        $('.button1').unbind('click');

});

$('.exit_button').click(function() {
        $('.button1').bind('click', function() {

        var get_id = $(this).attr('id');        
        var current = $('#div_pic_'+get_id);
        current.show();         
        if (current.is(':last-child')) {
            $('.next').prop('disabled', true);
            $('.previous').prop('disabled', false);
        }
        else if (current.is(':first-child')) {
            $('.previous').prop('disabled', true);
            $('.next').prop('disabled', false);

        }
        else
        {
            $('.next').prop('disabled', false);
            $('.previous').prop('disabled', false);
        }

        $('.outer').fadeIn(750);        
        $('.button1').unbind('click');

});

        $('.outer').fadeOut();
        $('.inner_content').hide();

});


$('.next').click(function() {         
        var current1 = $('.inner_content:visible');
        var nextSlide = current1.next('.inner_content');
        if (current1.is(':last-child')) {
            $('.next').prop('disabled', true);
            $('.previous').prop('disabled', false);
        }
        else
        {
        current1.hide();
        nextSlide.show();
        $('.next').prop('disabled', false);
        $('.previous').prop('disabled', false);
        }
});


$('.previous').click(function() {
        var current2 = $('.inner_content:visible');
        var prevSlide = current2.prev('.inner_content');
        if (current2.is(':first-child')) {
            $('.previous').prop('disabled', true);
            $('.next').prop('disabled', false);
        }
        else
        {
        current2.hide();
        prevSlide.show();
        $('.next').prop('disabled', false);
        $('.previous').prop('disabled', false);
        }

});





});

This is like one of my first JQuery projects so my coding may suck.

and a quick version of my HTML:

<img src="whatever.png" id="001" class="button1" />

<div class="outer">
<img src="images/closebox.png" class="exit_button" />
<div class="inner">

<div class="inner_content" id="div_pic_001">
</div>

</div>   
<button class="previous">Prev</button><button class="next">Next</button>    
</div>

This all works great, just how would I get it to pop up in the center of the area the user is viewing? I tried to do it in CSS with percentages, but that only works if the page is a static height and doesn’t scroll past the top. Any CSS tricks to do this or do I have to add this into my JQuery and how would I go about that?
Thank you
-Mike

Answer 1

You can use jQuery to center the image in the window.

jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
  this.css("left", (($(window).width() - this.outerWidth()) / 2) + enter code here$(window).scrollLeft() + "px");
  return this;
}

Code from this post

Then:

$('.outer').center().fadeIn(750);