SimpleModal does not size properly with initial load

Question

I currently have a generic image loader using simplemodal.

$('#clickMe').click(function(){
   $.modal("<div><img src=\"someimage.jpg\" /></div>");
});

The first time I click -- the modal window is incorrect. It is displayed as a small window behind the image.

The second time I click the button -- the modal is the correct. The size of the modal is correct based on the image rendered and image is inside the modal box.

I do not have the option of creating a div with the image and setting the display none property.

any insight ?

Answer 1

From what I can tell with the way you are loading the image, SimpleModal is not able to determine it's size.

You have a couple of options...

1) Add an onShow callback and call $.modal.setContainerDimensions()

$('.clickMe').click(function () {
    $.modal("<div><img src=\"someimage.jpg\" /></div>", {
        onShow: function () {
            $.modal.setContainerDimensions();
        }
    });
    return false;
});

2) Load the image first, then show it:

$('.clickMe').click(function () {
    var img = new Image();
    img.onload = function () {
        $.modal("<div><img src=\"someimage.jpg\" /></div>");
    };
    img.src = 'someimage.jpg';
    return false;
});

Both of those should work. Let me know if you have any troubles.