title: jquery popup window onload
body: <p>I want to show a pop up on page load and had a checkbox field in that popup, i want that page should only be visible if the checkbox is checked. The problem is that it works well on click function, but not able to get it work on checkbox. This is my code</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {  
  
      var id = '#dialog';
  
      //Get the screen height and width
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();
  
      //Set heigth and width to mask to fill up the whole screen
      $('#mask').css({'width':maskWidth,'height':maskHeight});
  
      //transition effect     
      $('#mask').fadeIn(1000);    
      $('#mask').fadeTo("slow",0.8);  
  
      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
  
      //Set the popup window to center
      $(id).css('top',  winH/2-$(id).height()/2);
      $(id).css('left', winW/2-$(id).width()/2);
  
      //transition effect
      $(id).fadeIn(2000);     
  
      //if close button is clicked
        if ($('.window .close').attr('checked')==true){
      function (e) {
      //Cancel the link behavior
      e.preventDefault();
  
      $('#mask').hide();
      $('.window').hide();
          }};     
  
          //if mask is clicked
      $('#mask').click(function () {
          $(this).hide();
      $('.window').hide();
          });     
  
        });
  
     &lt;/script&gt;
  
  
      &lt;div style="font-size: 10px; color: rgb(204, 204, 204);"&gt;lorem ipsum&lt;/div&gt;
  
       &lt;div id="boxes"&gt;
  &lt;div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"&gt;
  Simple Modal Window | 
  &lt;input type="checkbox" class="close"&gt;
  &lt;/div&gt;
  &lt;!-- Mask to cover the whole screen --&gt;
  &lt;div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"&gt;    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>