title: Hide Bootstrap Modal using Pure JavaScript On Click
body: <p>I was working on Bootstrap Pop Up Modals.</p>
  
  <p>I have 2 Buttons named <strong>Button1</strong> &amp; <strong>Button2</strong>.</p>
  
  <p>&amp;</p>
  
  <p>I have 2 Modals named <strong>Modal1</strong> &amp; <strong>Modal2</strong>.</p>
  
  <blockquote>
    <p>Note : <strong>Button2</strong> is inside the <strong>Modal1</strong> &amp; <strong>Button1</strong> is on the Web Page.</p>
  </blockquote>
  
  <p>If I click <strong>Button1</strong> , <strong>Modal1</strong> should be Open &amp; If I click <strong>Button2</strong> that is inside the Modal, then Modal1 should be hide automatically and Modal2 should be shown.</p>
  
  <p>I am doing it using jQuery Yet &amp; It's working Fine.</p>
  
  <pre><code>&lt;script&gt;
  $('#button1').click(function()
  {
      $('#modal1').modal('hide');
      $('#modal2').modal('show');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Question:</strong></p>
  
  <blockquote>
    <p>How I can do it using Pure JavaScript. ???????</p>
  </blockquote>