title: How to make modal box responsive?
body: <p>I have implemented this jQuery-based modal box: <a href="http://leanmodal.finelysliced.com.au/" rel="nofollow">http://leanmodal.finelysliced.com.au/</a>. It works perfect, and it is quite easy to use. However, it is not responsive - contrary to the rest of the website. Here is what I got so far:</p>
  
  <p><strong>CSS-part</strong></p>
  
  <pre><code>#lean_overlay {
      position: fixed;
      z-index:100;
      top: 0px;
      left: 0px;
      height:100%;
      width:100%;
      background: #000;
      display: none;
  }
  div.modalbox {
      background: #FFFFFF;
      border-radius: 5px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
      padding : 10px;
      width: 400px;
      display : none;
      position : absolute;
  }
  .modalbox-header {
      background: url("../images/hd-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
      border-bottom: 1px solid #CCCCCC;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 10px 0 0px 20px;
      margin: -10px 0 10px -10px;
      width : 100%;
  }
  </code></pre>
  
  <p><strong>Javascript (part of it):</strong></p>
  
  <pre><code>(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("&lt;div id='lean_overlay'&gt;&lt;/div&gt;");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
  $("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery);
  </code></pre>
  
  <p>And, at last - <strong>how it is used</strong>:</p>
  
  <pre><code>&lt;div class="modalbox"&gt;
      &lt;div class="modalbox-header"&gt;
          &lt;h2 class="normal"&gt;Title&lt;/h2&gt;
          &lt;div class="modal_close"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal_content"&gt;
          &lt;p&gt;Text goes here&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make it responsive? Thanks in advance!</p>