JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div class="showThrough">
    <label>Input 1:</label><input/>
  </div>
  <div>
    <label>Input 2:</label><input/>
  </div>
  <div class="showThrough">
    <label>Input 3:</label><input class="showThrough"/>
  </div>
  <input type="button" onclick="showDialog()" value="Show dialog"/>
  <input type="button" value="Submit"/>
  <div id="dialog" role="dialog" class="layer" style="display: none;">
    <input type="button" value="Close" onclick="hideDialog()"
      style="position: absolute; bottom: 15px; right: 15px;"/>
  </div>
</form>

CSS

form > div
{
  margin: 10px;
}

.layer
{
  margin: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.showThrough
{
  position: relative;
  z-index: 1100;
}

JavaScript

function showDialog()
{
	document.getElementById("dialog").style.display = 'table';
}

function hideDialog()
{
	document.getElementById("dialog").style.display = 'none';
}