Question

I have a function called:

showModal(data);

which when called, will create a modal with the content passed in. I was trying to center it, but i dont think ‘this’ is referring to the right object.

function showModal(data){
    $("<div class = 'modal'>").css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - $(this).height() / 2,
        left: $(window).width() / 2 - $(this).width() / 2
    }).append(data).appendTo("body").fadeIn();
}

It will just keep it at 0,0 on screen. How do i adjust it?

Answer 1

Try this:

function showModal(data){
    var modal = $("<div class = 'modal'>");
    modal.css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - modal.height() / 2,
        left: $(window).width() / 2 - modal.width() / 2
    }).append(data).appendTo("body").fadeIn();
}

In your context, this refers to the function showModal I think. But you’re trying to refer to the newly created div with the class “modal”. You need to store a reference to it because the .css call doesn’t change the reference to this inside of it. You’re probably thinking of normal event bindings, where the anonymous function you pass to it has a new context that jQuery defines this as the element in question. With css, you aren’t providing a callback, and therefore there is no way for jQuery to change or set this since there is no new scope/context. I’m probably using the wrong terms (context, scope, etc.)…

UPDATE:

The problem also seemed to be that since the data was not appended before the .css call, the modal would not have any substantial width/height. Not sure if the modal being appended to the body needs to be done before the .css call or not, but that might help too.

function showModal(data) {
    var modal = $("<div class='modal'>");
    modal.appendTo("body")
        .append(data)
        .css({
            "z-index": +$("#overlay1").css("z-index") + 5,
            top: $(window).height() / 2 - modal.height() / 2,
            left: $(window).width() / 2 - modal.width() / 2
        })
        .fadeIn();
}