Pop up div scrolling & close

Short code

by Serge

HTML

<div id="modal" onclick="this.classList.remove('modalHasContent')"><div class="body"></div></div>

<div align="justify"><span>Dr. Brrerere Krrerererer, MD, MPH <br><br>

Dr. werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y University (MPH).</span>

<div onclick="popupAct(this);" style="float:right;cursor:pointer;padding:10px;">Read more 

<span class="popupText"><b>Dr. B sdf sdf sdf, MHC. <br><br> Werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y D, MPH</b>
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y.
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y.
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj...

CSS

#modal{
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}
#modal .body:before{
  float:right;
  cursor: pointer;
  display: block;
  content: "\00d7";
  padding:10px;
}
#modal .body{
  width: 80%;
  border: 1px solid gray;
  padding: 10%;
  background-color: white;
  overflow-y: scroll;
  height: calc(100% - 30%);
}
.modalHasContent{
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
}
.popupText{display: none;}

JavaScript

function popupAct(t) {
	m=document.getElementById("modal");
	m.firstElementChild.innerHTML=t.firstElementChild.innerHTML;
  m.classList.add('modalHasContent');
  /*
  element.children(":first").toggleClass("redClass");
  */
}