Take the 2-minute tour ×

To all you Javascript/jQuery experts out there:

I'm having some issues with a particular script. I found a simple modal window script that I'm trying to implement. The original functionality was that it would simply hide/show the window div with its "static" content. This is nice, but I needed the ability to be able to specify the content on the fly. So I changed things up by allowing the .load() function to be used to "inject" the div's content and then the script would simply show the window as normal. However, when the modal is closed, I emptied the contents of the div using .empty() to allow the ability to add different content on the fly depending on the value of an attribute in the link used to open the model window.

Everything works just fine except the window is not centered in the middle of the screen if I use the .load() function as opposed to just hard-coding the <embed> code into the div's content. If I hard-code the <embed> object it centers just fine and looks awesome.

Obviously there's a discrepancy in the overall window height/width if the <embed> object is injected into the div on the fly. I tried positioning the .load() function before and after the script looks for the total width/height of the window div, but that doesn't seem to affect anything.

Any help would be greatly appreciated!!

Here's the script: `$(document).ready(function() {

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
    //Cancel the link behavior

    //Get the A tag
    //Get source file for AJAX request
    var source = $(this).attr('src');

    //If source is set, send ajax request, and then load content into window
    if(source != undefined) {


    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen

    //transition effect     

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect


//if close button is clicked
    //Cancel the link behavior

    $('.window').fadeOut("slow", function() {


//if mask is clicked



share|improve this question

1 Answer 1

That's because load is triggering an AJAX request and your centering code is being run before the content is loaded. What you need to do is center the modal in the ajax complete handler.

$('.window').load(source,null,function(){ functionThatCentersModal() });
share|improve this answer
Thanks man, that did it! I appreciate it! –  cshoffie Aug 23 '12 at 23:23

Your Answer


