jquery ui dialog asp.net

Question

Can someone please tell me how to stop a jQuery Dialog from opening when the asp.net web form opens.

After looking online, I have applied the CSS property display : none; to the containing div.

<style>
    #dialog
    {
        display: none;
    }

</style>

And the html is:

<div id="dialog" title="Display Message" >
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <span id="Test" runat="server">Test</span>
</div>

Also the jQuery code is as follows:

   $(function () {
        $("#dialog").dialog(
            {
                autoOpen: true,
                draggable: false,
                modal: true,
                resizable: false
           });
    });

Everything is working fine, just this dialog box keeps showing up when the page loads.

I tried that, and yes it did stop it from coming up, but it also stopped it from appearing when I clicked on the button to make it visible. — gilesrpa
– gilesrpa, Commented Jan 23, 2014 at 16:19
To open it, you then need to call $("#dialog").dialog("open"); — StuartLC
– StuartLC, Commented Jan 23, 2014 at 16:20
Your <div> looks like it's missing style="display: none". So you div will always show even if the dialog isn't opened. — Humpy
– Humpy, Commented Jan 23, 2014 at 16:26

John - Not A Number · Accepted Answer · 2014-01-23 17:23:28Z

1

You need to set the autoOpen to false, and then add a click handler to your button:

            var $dialog = $('#dialog').dialog({
                autoOpen: false,
                draggable: true,
                resizable: true,
                modal: true
            });

            // click event handler to pop up dialog
            $('#IdOfTheDialogOpenButton').click(function () {
                // open the dialog if it isn't already
                if (!$dialog.dialog('isOpen')) {
                    $dialog.dialog('open');
                }
            });

answered Jan 23, 2014 at 17:23

John - Not A Number

6494 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gilesrpa Over a year ago

Thank you that John, but it does not work. Well not completely anyway. If I add the event handler to the button and set the autoOpen to false, yes the dialog is not open when the page loads, but then it also does not display when I click the button. But when I set the autoOpen property back to true. I get the dialog when the page loads and I also get the dialog when I click the button. Please note that I am using ASP.Net and ultimately wish to be able to click on an ASP.Net button.

John - Not A Number Over a year ago

For this sort if issue, I find debugging with Firefox and Firebug invaluable. Presumably you have the above code in your document.ready function? If so, you could try moving the var $debug declaration outside of it - it might not be in scope within the event handler. Alternatively, you could try changing the $dialog.dialog(...) calls to $('#dialog').dialog(...) and see if that helps. If you use firebug, you could try calling the dialog's open command directly from the javascript console, and see if it gives any error.

Collectives™ on Stack Overflow

jquery ui dialog asp.net

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related