JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim, tortor et commodo suscipit, eros velit condimentum lectus, id cursus neque ligula non orci. Donec mollis metus sed semper convallis.
</p>
<a class="modal-link" href="#" data-content="Here is some string data to display in the modal">Click to open modal</a>
<p>
Praesent eleifend metus et libero vehicula pretium. Maecenas bibendum augue a sollicitudin elementum. Suspendisse potenti.
</p>

<a class="modal-link" href="#" data-content="<h2>Here is some other string data</h2><p>this time in html format</p>">Click to open another modal</a>

<p>
Phasellus maximus dapibus purus quis ullamcorper. Integer tempus tellus quis nisi interdum, eu ullamcorper leo sagittis. Vestibulum leo elit, lacinia a feugiat non, feugiat quis massa
</p>

<a class="modal-link" href="#" data-content="You can have as many modal-links as you want as long as you give them the correct class name">Click to open yet another modal</a>

<!--here are the elements for the modal-->
  <div id="modal-outer" class="modal-outer">
    <div class="modal-inner">
      <div id="modal-content" class="modal-content"></div>
      <button id="close">Close modal</button>
    </div>
  </div>
</div>

CSS

.wrapper{
  font-family:sans-serif;
  color:#222;
  line-height:1.5rem;
}
*{
  box-sizing:border-box;
}
.modal-outer{
  position:absolute;
  top:0;
  left:0;
  display:none;
  background:rgba(255,255,255,0.93);
  width:100vw;
  height:100vh;
}
.modal-inner{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

JavaScript

//referencing DOM elements
var closeBtn = document.getElementById('close');
var modalOuter = document.getElementById('modal-outer');
var modalContent = document.getElementById('modal-content');
var modalList = document.querySelectorAll('.modal-link');

//functions
function openModal (event) {
	event.preventDefault();
  modalContent.innerHTML=this.getAttribute('data-content');
  modalOuter.style.display='table';
}
function closeModal (event) {
  modalContent.innerHTML='';
  modalOuter.style.display='none';
}

//Attaching events
closeBtn.addEventListener('click', closeModal, false)

for (var i=0; i<modalList.length; i++){
	modalList[i].addEventListener('click', openModal, false);
}