title: Open a popup window in the center of the monitor
body: <p>I am trying to open a popup window in the center of the monitor. As I know screen size of each desktop or laptop will vary. So that is the reason I am looking for some way so that whenever my code tries to open a popup window it should get opened in the center of the browser.</p>
  
  <p>Below is my code-</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;style&gt;
  
  * { font-family: Trebuchet MS; }
  #containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
  /*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
  #blockdiv {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
  ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
  ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
  h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
  #close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
  #close:hover {  cursor: pointer; background: #E5E5E5 }
  
  #apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
  #apply:hover {  cursor: pointer; background: #E5E5E5 }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  function open(url) {
      $('#blockdiv').fadeIn();
      $('#iframe').attr('src', url);
      $('#containerdiv').fadeIn();   
  }
  
  function close() {  
      $('#blockdiv').fadeOut();
      $('#containerdiv').fadeOut();  
  }
  
  $(document).ready(function() {
    $('ul').css({width: $('#containerdiv').width()-20,height:    $('#containerdiv').height()-90})
  
       $('#close').click( function() { close() })
       $('#apply').click( function() { open('http://www.google.com/') })
  
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;span id="apply"&gt;ApplyOnline&lt;/span&gt;
  &lt;div id="blockdiv"&gt;&lt;/div&gt;
  &lt;div id="containerdiv"&gt;
      &lt;iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"&gt;&lt;/iframe&gt;
      &lt;span id="close"&gt;Close&lt;/span&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But somehow the above code, doesn't gets opened in the center of the monitor. Can anybody help me on this? What changes I need to make in the above code so that it always open the popup window in the center of the circle.</p>