insertar un botón que cuando se clique aparezca una imagen por encima con los márgenes semitransparentes en negro

<input type="button" value="Button" id="button">
<div class="modal-overlay">
  <div class="modal-box">
  <img src="http://www.placehold.it/400x300" alt="">
  </div>
</div>

div.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background-color: rgba(0,0,0,0.5);
  display: none;
}
div.modal-box{
  width: 400px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -200px;
  z-index: 99999999;
}
div.modal-box img{
  width: 100%;
  height: 100%;
}

$('#button').on('click', function() {