Close Modal By Click Off Of It

close-modal-by-click-off-of-it.markdown

Close Modal By Click Off Of It

Live Version http://close-modal-by-click-off-of-it.surge.sh/

I hope this helps someone

A Pen by Daniel Jordan Osborn on CodePen.

License.

index.html

<div class="section">
  <div class="container">
    <div class="box">
      <button id="open" class="button is-dark is-pulled-right navbar-burger burger" title="Click To Open Modal"><span></span><span></span><span></span></button>
      <p class="title"> Modal JavaScript </p>
      <p class="subtitle">Using Bulma Modal</p>
      <p>
        This is the simplest way I could come up with atm to toggle the <code>is-actice</code> class.
      </p>
      <p>
        <br/>
        <pre>
<u><b>pseudocode</b></u>
   <code>
on window click 
 if the target is the button then toggle 'is-active';
 else if the target's parent node is the modal then remove 'is-active';
        
        </code></pre>
      </p>
    </div>
  </div>
</div>

<div class="modal " id="box">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
    </header>
    <section class="modal-card-body">
      <p> Content </p>
    </section>
    <footer class="modal-card-foot">
    </footer>
  </div>
</div>

script.js

var box = document.getElementById('box');
var open = document.getElementById('open');
var a = 'is-active';

window.onclick = function (e) {// Window Click
  
  var t = e.target;// Target
    if(t == open) { // If target is the button
    box.classList.toggle(a);// Toggle is-active class
    }
  /*
  ** else if the targets parent belongs to modal
  */
   else if(t.parentNode == box) { 
     box.classList.remove(a);// Remove is-active class
   }
}

style.css

.burger {
  display: block;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />