title: Scaling Popup box using CSS, Jquery
body: <p>I am creating popup box in my website homepage. i refered this code from one of other thread from stack, it works as per my requirement. </p>
  
  <p>Below code will gives me the correct popup box. But i need to make the popup box to be 1/4 th of page, is that  possible to do?</p>
  
  <pre><code>&lt;div id="boxes"&gt;
  &lt;div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"&gt;
    &lt;img src="images/coupon2011.jpg" width="507" height="300" /&gt; 
  &lt;a href="#" class="close"&gt;&lt;img src="images/closelabel.gif" width="66" height="22" /&gt;&lt;/a&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;
  
   &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() { 
  // Check if cookie exists
  if (Cookies.get('popunder')) {
      return;
  }
  
  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);     
  
  // Set cookie to be sure the popover activated again
  Cookies.set('popunder', '1');
  
  //if close button is clicked
  $('.window .close').click(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; 
  </code></pre>
  
  <p>thanks in advance....</p>