JSFiddle - React, Tailwind, and code Playground

by Hendeca

HTML

<div class="container">
  <div id="cover"></div>
  <div id="dialog">
    My Dialog Content
    <br><input type="text">
    <br><input type="button" value="Submit">
    <br><a class="close-button" data-popup="dialog">[Close]</a>
  </div>
  <a class="show-button" data-popup="dialog">Show</a>   
</div>

CSS

.container {
  height: 5000px;
}

.show-button,
.close-button { 
  position: fixed; 
  color: blue;
  text-decoration: underline;
}

.show-button:hover,
.close-button:hover {
  cursor: pointer;
}

#cover {
  display:none;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background:gray;
  filter:alpha(Opacity=50);
  opacity:0.5;
  -moz-opacity:0.5;
  -khtml-opacity:0.5
}
#dialog {
  display: none;
  position: fixed;
  top:50%;
  left:50%;
  width:400px;  /* adjust as per your needs */
  height:400px;   /* adjust as per your needs */
  margin-left:-200px;   /* negative half of width above */
  margin-top:-200px;   /* negative half of height above */
  z-index:100;
  background:white;
  padding:2px;
  font:10pt tahoma;
  border:1px solid gray
}

JavaScript

var showButton = document.getElementsByClassName('show-button');
var closeButton = document.getElementsByClassName('close-button');

showButton[0].addEventListener('click', showPopUp);
closeButton[0].addEventListener('click', closePopUp);

function showPopUp(e) {
		e.preventDefault();
    var dialogId = e.currentTarget.getAttribute('data-popup');
    var scrollPos = window.scrollY;
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById(dialogId)
    cvr.style.display = "block"
    dlg.style.display = "block"
    window.scroll(0, scrollPos);
}
function closePopUp(e) {
		e.preventDefault();
    var dialogId = e.currentTarget.getAttribute('data-popup');
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById(dialogId)
    cvr.style.display = "none"
    dlg.style.display = "none"
}