Dialog box is appeared while loading page

Question

I having one div that id is dialog-form while user can click the button that time the dialog is open its working fine but the problem is while page load the dialog div is appeared because autoOpen option is true if i can set the option is false then dialog is visible at 3 seconds please some help friends. . .

  $(function () {
         $("#create-user").click(function () {
             $("#dialog-form").dialog("open");
         });
         var name = $("#name"),
             email = $("#email"),
             password = $("#password"),
             allFields = $([]).add(name).add(email).add(password),
             tips = $(".validateTips");
         $("#dialog-form").dialog({
                 autoOpen: true,
                 height: 300,
                 width: 350,
                 modal: true,
                 buttons: {
                     "Create an account": function () {
                         //some operations      
                         $(this).dialog("close");
                     }
                 },
                 Cancel: function () {
                     $(this).dialog("close");
                 }
             },
             close: function () {
                 allFields.val("").removeClass("ui-state-error");
             }
         });
 });

what do you mean by it appears at 3 second on setting autoopen as false — Milind Anantwar, Feb 04 '14 at 13:55
not like that but it will auto show and hide while button clicking — Dinesh, Feb 04 '14 at 13:59
I can't understand your issue but I think you should put your dialog creation code inside click...and remove the `$("#dialog-form").dialog("open");` — Premshankar Tiwari, Feb 04 '14 at 14:13

score 0 · Accepted Answer · answered Feb 04 '14 at 15:06

I think what's happing is that your dialog is inline with the code that executes on load. The inline code is not "controlled" by your click.

So here I've shortened your dialog a bit (I didn't understand what you were doing at the bottom part) and made it equal to a variable. It will not run when the page is loaded (autoopen: false).

Then under the click function, you can open the dialog by just calling the variable.

JS

var mydialog = $("#dialog-form").dialog({
                                         autoOpen: false,
                                         height: 300,
                                         width: 350,
                                         modal: true
                                         });

var name = $("#name"),
    email = $("#email"),
    password = $("#password"),
    allFields = $([]).add(name).add(email).add(password),
    tips = $(".validateTips");


$("#create-user").click(function(){
                                   mydialog.dialog("open");
                                   });

Here's a rudimentary FIDDLE

Dialog box is appeared while loading page

1 Answers1