SimpleModal Jquery plugin position problem...

Question

Hi all.

I have the same problem of this thread: http://stackoverflow.com/questions/2480320/question-about-simplemodal-jquery-plugin-possible-to-re-center-after-initial-o

I tried the possible solution, but no success. My page have a scrollbar and after I open the modal, I have some action that resize the div. But when the div exceed the window visible area, the exceeded content is hidden. When I scroll the page the modal stay on the same position!

Its works well on IE6, not no on IE8.

Answer 1

I would suggest setting max-height and max-width to keep the dialog from growing too large. Then you may need to make sure that the styling for this div includes overflow:scroll.

Answer 2

Example of a possible solution:

$('#modalContent').modal({
    onShow: function (dialog) {
        var sm = this;

        // bind click event to get ajax content
        $('.link', dialog.container[0]).click(function (e) {
            e.preventDefault();

            $.ajax({
                ..., // your settings here
                success: function (data) {
                    dialog.data.html(data); // put the data in the modal
                    dialog.container.css({height:'auto', width:'auto'}); // reset the dimensions
                    sm.setContainerDimensions(); // resize and center modal

                    // if you want to focus on the content:
                    sm.focus();

                    // if you want to rebind the events
                    sm.unbindEvents();
                    sm.bindEvents();
                }
            });
        });
    }
});

I'm going to look into putting a resize function in SimpleModal, which would take care of most of these steps. Until then, this should work for you.

-Eric