Simple Modal -- again

Couldn't find the old one, this one is still really simple & centering with translate might actually be a decent improvement.

by Matt Rummler

HTML

<div class="content">
Some stuff goes here.
<br>
Some more stuff
<br>
<br>
more
<br>
stuff
<br>
h
<br>
e
<br>
r
<br>
e
<br>
<div class="modalbase gray hidden">
  <div class="modal content">
    This text constitutes the full contents of the modal.

  </div>
</div>
<div class="flex frow fspacee">
<button id="modal0">
Modal0
</button>
<button id="modal1">
Modal1
</button>
</div>
</div>

CSS

.modalbase
{
  position: fixed;
  background-color: rgba(0,0,0,.4);
  height: 100%;
  width: 100%;
  top: 0px;
  z-index: 1000;
}
.modal.content
{
  background-color: rgb(255,255,255);
  width: 50%;
  height: 45%;
  margin: 0 auto;
  z-index: 1001;
  position: absolute;

  /*
  top: 50%;
  left: 50%;
  */
  transform: translate(50%, 50%);
  /**/
}
.flex{ display: flex;}
.frow{ flex-flow: row;}
.fspaceb{ justify-content: space-between;}
.fspacee{ justify-content: space-evenly;}
.gray{background-color: rgba(0,0,0,.4);}


.hidden
{
  display: none !important;
  /*display: initial !important;*//*would like to keep this but need to research ... if it really just sets it back to what it was initially this is not ueful for me see here: http://stackoverflow.com/a/23345985/1748266*/
}
.show /* 0nly works with block level elements */
{
  display: block !important;
  visibility: visible !important;
}
.invisible
{
  visibility: hidden !important;
  z-index: 0;
}
.visible
{
  visibility: visible !important;
  z-index: 100;
}

JavaScript

window.onload
{
console.log('this is logging...');
  let modal0 = document.querySelector(".modalbase");
  
  let modal0ButtonClick = function(e)
  {
    if(modal0)
    {
      modal0.classList.remove('hidden');
    }
    
  }
  
  let modalBackGroundClick = function(e)
  {
    let clickOrNot = true;
    if(e.target.classList !== modal0.classList)
    {
      clickOrNot = false;
    }
    if(clickOrNot)
    {
      modal0.classList.add('hidden');
    }
  }
  
  document.getElementById('modal0').addEventListener('click', modal0ButtonClick);
  modal0.addEventListener('click',modalBackGroundClick);
}