title: How to open jquery dialog box on page onload event
body: <p>Here is the complete code. I want to open this dialog box on page load event instead of click. Please assist me on this.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  a { 
      text-decoration:none; 
      color:#00c6ff;
  }
  
  h1 {
      font: 4em normal Arial, Helvetica, sans-serif;
      padding: 20px;  margin: 0;
      text-align:center;
  }
  
  h2 {
      color:#bbb;
      font-size:3em;
      text-align:center;
      text-shadow:0 1px 3px #161616;
  }
  
  #mask {
      display: none;
      background: #000; 
      position: fixed; left: 0; top: 0; 
      z-index: 10;
      width: 100%; height: 100%;
      opacity: 0.8;
      z-index: 999;
  }
  
  .login-popup{
      display:none;
      background: #fff;
      padding: 10px;  
      border: 2px solid #ddd;
      float: left;
      font-size: 1.2em;
      position: fixed;
      top: 50%; left: 50%;
      z-index: 99999;
      box-shadow: 0px 0px 20px #999;
      -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
      -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
      border-radius:3px 3px 3px 3px;
      -moz-border-radius: 3px; /* Firefox */
      -webkit-border-radius: 3px; /* Safari, Chrome */
  }
  
  img.btn_close {
      float: right; 
      margin: -28px -28px 0 0;
  }
  
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('a.login-window').click(function() {
  
          // Getting the variable's value from a link 
          var loginBox = $(this).attr('href');
  
          //Fade in the Popup and add close button
          $(loginBox).fadeIn(300);
  
          //Set the center alignment padding + border
          var popMargTop = ($(loginBox).height() + 24) / 2; 
          var popMargLeft = ($(loginBox).width() + 24) / 2; 
  
          $(loginBox).css({ 
              'margin-top' : -popMargTop,
              'margin-left' : -popMargLeft
          });
  
          // Add the mask to body
          $('body').append('&lt;div id="mask"&gt;&lt;/div&gt;');
          $('#mask').fadeIn(300);
  
          return false;
      });
  
      // When clicking on the button close or the mask layer the popup closed
      $('a.close, #mask').live('click', function() { 
        $('#mask , .login-popup').fadeOut(300 , function() {
          $('#mask').remove();  
      }); 
      return false;
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
          &lt;div class="btn-sign"&gt;
          &lt;h2&gt;&lt;a href="#login-box" class="login-window"&gt;Click me to Open the dialog box&lt;/a&gt;&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div id="login-box" class="login-popup"&gt;
          &lt;a href="#" class="close"&gt;&lt;img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;
           &lt;h1&gt;This is a dialog box !&lt;/h1&gt; 
           &lt;p&gt;How to load it on page load event?&lt;/p&gt;
          &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the complete code. I want to open this dialog box on page load event instead of click. Please assist me on this.</p>