JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<button id='F_id'>OPEN Modal F_id</button>

<div id='ThisModal' class='modal'>
   <div class='modal-content'>
     <span class='close'>&times;</span>
     <BR/>
     <p align=left>Line <B>65:</B><BR/>
     Modal Content: Test Variable Content<BR/>
     <center>Nothing Fancy!</center>
   </div>
</div>

CSS

.modal {
display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 444px; /* Full width */
 height: 444px; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(255,255,255); /* Fallback color */
 background-color: rgba(255,255,255,0.3); /* Black w/ opacity */
}
 
/* Modal Content/Box */
.modal-content {
 background-color: #fefefe;
 margin: 25% auto; /* 25% from the top and centered */
 padding: 20px;
 border: 1px solid #888;
 width: 266px; /* Could be more or less, depending on screen size */
}
 
/* The Close Button */
.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
 
.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

JavaScript

var modal = document.getElementById('ThisModal');
var btn = document.getElementById('F_id');
var span = document.getElementsByClassName('close')[0];
 
btn.onclick = function() {
 modal.style.display = 'block';
}
 
span.onclick = function() {
 modal.style.display = 'none';
}
 
window.onclick = function(event) {
 if (event.target == modal) {
   modal.style.display = 'none';
 }
}