JSFiddle - React, Tailwind, and code Playground

by Guillermo Ignacio Enriquez Gutierrez

HTML

<div id="main">
  <h2>Main</h2>
  <button name="thename" type="submit" onclick="showModal()" tabindex=1>**Show modal**</button>
  <form>
    Random Fields:<br/>
    <input type="text" name="field1" tabindex=2 /><br />
    <input type="text" name="field2" tabindex=3 /><br /> 
    <input type="text" name="field3" tabindex=4 /><br />
  </form> 
  <br/>
  <input type="checkbox" tabindex=5/>Random checkbox
  <br/>
  <a href="http://www.w3schools.com/" tabindex="6">W3Schools</a>
  <a href="http://www.google.com/" tabindex="7">Google</a>
  <a href="http://www.microsoft.com/" tabindex="8">Microsoft</a>
</div>
<br/><br/>
<div id="sub" class='hidden modal'>
  <div>
    <h2>Modal</h2>
    More Random Fields:<br/>
    <input type="text" name="fieldx" tabindex=10/><br />
    <input type="text" name="fieldx" tabindex=10/><br />
  </div>
</div>

CSS

/* Just to make things more obvious */
body {
  background-color: #eee;
}
input {
  background-color: white;
}

/* Modal implementation */
.hidden {
  display: none;
}
.overlay {
  background-color: rgba(255,255,255,0.6);
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
}
.overlay div {
  margin: auto;
  width: 60%;
  height: 80%;
  border: thin solid #aaa;*/
  padding: 10px;
}

JavaScript

function showModal() {
  var sub = document.getElementById("sub");
  sub.className = "";
  sub.className = "overlay";
}