title: Making Modal View responsive using css
body: <p>Hello Great coders of Stackoverflow. How can i make the code below to be responsive or to automatically fit into  the screen of all mobile phones or mobile devices. The sorce of this code can be found in the link below</p>
  
  <p>source: <code>http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;head&gt;
     &lt;title&gt;&lt;/title&gt;
  
  
  
  &lt;style&gt;
  .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 99999;
      opacity:0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
  }
  .modalDialog:target {
      opacity:1;
      pointer-events: auto;
  }
  .modalDialog &gt; div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: #fff;
      background: -moz-linear-gradient(#fff, #999);
      background: -webkit-linear-gradient(#fff, #999);
      background: -o-linear-gradient(#fff, #999);
  }
  .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
  }
  .close:hover {
      background: #00d9ff;
  }
  
  
  &lt;/style&gt;
  
  
  &lt;/head&gt;&lt;body&gt;
  
  &lt;a href="#openModal"&gt;Open Modal&lt;/a&gt;
  
  &lt;div id="openModal" class="modalDialog"&gt;
      &lt;div&gt;   &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
  
              &lt;h2&gt;Modal Box&lt;/h2&gt;
  
          &lt;p&gt;This is a sample modal box that can be created using the powers of CSS3.&lt;/p&gt;
          &lt;p&gt;You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Thanks.</p>