title: Close Modal using CSS only
body: <p>I need to close my modal just by using css like this: <a href="http://jsfiddle.net/raving/1mhsynmw/" rel="nofollow">http://jsfiddle.net/raving/1mhsynmw/</a></p>
  
  <p>However, I can't get it to work. My modal below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function alert(msg) {
   document.getElementById("alert").innerHTML = '&lt;div class="modal-overlay"&gt;&lt;div class="modal"&gt;&lt;div class="modal-container"&gt;&lt;h3&gt;' + msg + '&lt;/h3&gt;&lt;p&gt;' + msg + '&lt;/p&gt;&lt;/div&gt;&lt;p class="modal-footer"&gt;&lt;a href="javascript:" id="ok"&gt;OK&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;';
  }
  
  alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family:arial;
    font-size:11px;
  }
  .modal {
       position: fixed;
       top: 20px;
       margin-left: auto;
       margin-right: auto;
       left: 0;
       right: 0;
       width: 200px;
       box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
       background: #fff;
  }
  .modal p {
    cursor:default;
  }
  .modal-container {
    padding: 10px;
  }
  .modal p a {
    color:#555;
  }
  .modal-footer a {
    display:block;
    border:1px solid #eee;
    width:9.5%;
    padding:3px;
    background:#fff;
    text-decoration:none;
    float:right;
  }
  .modal-footer {
       background: #fafafa;
       border-top: 1px solid #eee;
       margin-bottom: 0px;
    margin-top:0px;
    padding:8px;
    height:25px;
  }
  .modal h3 {
    margin:0px;
    white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 175px;
  }
  .modal-last {
    padding-bottom:0px;
  }
  .modal-overlay:before {
       content: '';
       position: fixed;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="alert"&gt;&lt;/div&gt;
  
  &lt;h3&gt;Content..&lt;/h3&gt;
  &lt;p&gt;Just to show it's a modal&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>QUESTION: Is there any way to close the modal without using Javascript? And it that is not possible, how can I use Javascript to close this modal?</strong></p>