ASP.NET,jQuery UI Dialog showing in page for 1-2 seconds

Question

I have an ASP.NET page where i will check whether the user has logged in to the system (by checking the session value) in the page load and if not logged in,it will show a jQueryUI dialog for login.

My ASPX page contains these script in the head tag

<style type="text/css">
    body { font-size: 62.5%; }
 label, input { display:block; }
 input.text { margin-bottom:12px; width:95%; padding: .4em; }
 fieldset { padding:0; border:0; margin-top:25px; }
 h1 { font-size: 1.2em; margin: .6em 0; }
 div#users-contain {  width: 350px; margin: 20px 0; }
 div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
 div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
 .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }


</style>
<script type="text/javascript">
$(function() {

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

 function updateTips(t) {
  tips.text(t).effect("highlight",{},1500);
 }


 function checkRegexp(o,regexp,n) {

  if ( !( regexp.test( o.val() ) ) ) {
   o.addClass('ui-state-error');
   updateTips(n);
   return false;
  } else {
   return true;
  }

 }

 $("#dialog").dialog({
  bgiframe: true,
  autoOpen: false,
  height: 250,
  modal: true,
  buttons: {
          Cancel: function() {
    $(this).dialog('close');
       },            
       NewUser: function() {
     $(this).dialog('close');
     window.location.href="Register.aspx";
       },
       'Sign in': function() {
    var bValid = true;
    allFields.removeClass('ui-state-error');


    bValid=true;
    isValidationFails=false;
    if (bValid)
    {      
                                        // Go to another page

        } 
    }
   }
  },
  close: function() {
   allFields.val('').removeClass('ui-state-error');
  }
 });



 $('#create-user').click(function() {
   $(this).dialog('close');
   window.location.href="Register.aspx"
 })
 .hover(
  function(){ 
   $(this).addClass("ui-state-hover"); 
  },
  function(){ 
   $(this).removeClass("ui-state-hover"); 
  }
 ).mousedown(function(){
  $(this).addClass("ui-state-active"); 
 })
 .mouseup(function(){
   $(this).removeClass("ui-state-active");
 });

//});
var isAuthenticated = $("#isAuthenticated").val();
if (isAuthenticated && isAuthenticated == "false")
{
  $("#dialog").dialog("open");
}

});

</script>

SErver side code (in Page_Load)

 if (Session["trCustomerId"] != null)
        {
            Response.Write("Logged in user");
            ClientScript.RegisterHiddenField("isAuthenticated", "true");
        }
        else
        {
            ClientScript.RegisterHiddenField("isAuthenticated", "false");
        }

The program is working fine now . But the problem is when the page is loading,it is showing the UIDialog div for 1-2 seconds in the screen and then disappearing. I dont want to show like this.Can any one tell me how to solve this ?

Answer 1

Try setting the style on your dialog markup to display:none;

#dialog{
   display: none;
}

You can then show it if the dialog.open doesn't do it for you.

$('#dialog').show()

Answer 2

try this, in html code type style="display:none;" for #dialog browser load html first