title: Modal pop up fade in on open click and fade out on close
body: <p>I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code</p>
  
  <pre><code>&lt;style&gt;
  div.delModal
  {   
      position:absolute;
      border:solid 1px black;
      padding:8px;
      background-color:white;
      width:160px;
      text-align:right
  }
  &lt;/style&gt;
  &lt;script&gt;
  function showModal(id) {
          document.getElementById(id).style.display = 'block';
          //$(this).fadeIn('slow');
      }
      function hideModal(id) {
          document.getElementById(id).style.display = 'none';
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;input type ="button" value="delete" onclick="showModal('delAll1')"&gt;
  
  &lt;div class="delModal" style="display:none" id="delAll1"&gt;
    &lt;img src="images/warning.png" /&gt;&amp;nbsp;Are you sure you want to delete vessel and the corresponding tanks?&lt;br /&gt;
      &lt;input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/&gt;     
      &lt;input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>