Simple Modal on a hidden div

Question

I want to have a hidden div on the page with the elements of a SimpleModal dialogue, but when I set the CSS visibility to hidden and fire the modal, it is empty.

How can I use a DIV in this fashion without making it visible on the page?

Answer 1

Instead of visibility: hidden; what you want is display: none;. Most jQuery plugins work off display instead of visibility (even more core jQuery functions related to showing/hiding do this).

SimpleModal (and every other jQuery modal I know off) will reverse display: none when they show the modal...they're actually expecting this :)

Answer 2

Without seeing exactly what you are trying to do, I can only guess what the issue might be.

Be default, SimpleModal will "make visible" the element you send it to display. If you have content inside that element, you'll have to manually "show" it.

Something like this would solve the issue:

$(element).modal({
    onShow: function (d) {
        $(hiddenElement).show();
    }
});