JSFiddle - React, Tailwind, and code Playground

by Mark Carpenter Jr

HTML

<section class="section section-b">
<div class="container">
<h1>Workshops</h1>
<div class="grid-container">
  <div class="grid-box grid-box-a modal-btn" target="yoga">
    <h3>Yoga Bootcamp</h3>
  </div>
  <div class="grid-box grid-box-b modal-btn" target="meditation">
    <h3>Meditation</h3>
  </div>
  <div class="grid-box grid-box-c modal-btn" target="pregnancy">
    <h3>Pregnancy</h3>
  </div>
  <div class="grid-box grid-box-d modal-btn" target="graditude">
    <h3>Finding Gratitude</h3>
  </div>
</div>
<div id="yoga" class="modal" style="display: none">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Yoga Bootcamp</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="meditation" class="modal" style="display: none">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Meditation</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="pregnancy" class="modal" style="display: none">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Pregnancy</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
<div id="graditude" class="modal" style="display: none">
  <div class="modalContent">
    <span class="close">&times;</span>
    <h4>Finding Gratitude</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis totam iure ad, quasi vero blanditiis.</p>
  </div>
</div>
</div>

JavaScript

var modal = document.querySelector('.modal-container');
var btn = document.querySelector('.modal-btn');
var span = document.getElementsByClassName('close')[0];

btn.onclick = function() {
	console.log(this);
	if (modal.id == btn.target) {
  	modal.style.display = 'block';
  }
  
}

span.onclick = function() {
  modal.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}