JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a href="javascript:void(0);" id="showpopup">Show popup</a>
<div id="popup">
  <div id="popupcontent"><span>Много текста</span></div>
</div>

CSS

#popupcontent span{height:30px;display:block;color:#fff;} /*для набивки*/

#popup:before{
  content:"X";
  position:fixed;
  right:35px;
  top:20px;
  font-size:20px;
  color:#ccc;
  cursor:pointer;
}
#popup {
  background: rgba(0,0,0,.75);
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  overflow-y:auto;
}
#popupclose{
  position:absolute;
  right:20px;
  top:20px;
  font-size:20px;
  color:#ccc;
  text-decoration:none;
}
#popupcontent{
  width:calc(100% - 160px);
  margin:auto;
  padding:20px;
  background:rgba(255,255,255,.3); /*для наглядности*/
}

JavaScript

$(document).ready(function(){
//для набивки++
	var span = $('#popupcontent').html();
  var str = "";
   for (i=0;i<100;i++){
      str += span;
   }
   $('#popupcontent').html(str)
//для набивки--
   
   $('#popup').click(function(e){
	if (e.target == this) 
  	document.getElementById('popup').style.display = "none";
  })

  $('#showpopup').click(function(e){
      document.getElementById('popup').style.display = "block";
      e.preventDefault(); // чтобы A не работала как ссылка
      return false; // чтобы A не работала как ссылка
  })
})