Question

I have this div

<div id="termSheetPopup" style="visibility:hidden;">

It’s hidden on the page b/c I want it to display in a JQuery popup. I make it a popup with this:

function createAndShowTermSheetPopup() {
            $('#termSheetPopup').dialog({
                modal: true,
                resizable: false,
                title: 'Generate Term Sheet',
                width: 350,
                height: 200,
                autoOpen: true,
                buttons: {
                    "Generate": function () {
                        alert('Generating...');
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

I want it to make it visible to see in the popup but not on the page when the popup isn’t up. How do I do that?

Answer 1

Set autoOpen to false when you initialize it, then call $('#termSheetPopup').dialog('open') when you’re ready to use it.

More information can be found on the jquery-ui demo page.

Update: If you can excuse jsFiddle not showing CSS correctly, this is a demo of what I mean.