<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id pulvinar libero. Mauris tempor eget elit eget elementum. Praesent porttitor justo vel varius consectetur. Praesent elementum, mauris et cursus tempor, sem lacus commodo enim, sit amet tempor elit tortor in tellus. Cras pulvinar convallis tortor, ac mattis augue laoreet nec. Nunc sit amet nulla sem. Fusce at metus mollis augue porttitor vestibulum. Maecenas condimentum hendrerit mauris, scelerisque luctus dolor facilisis eu. Aliquam posuere hendrerit cursus. 
</div>
<div class="hm-modal-holder">
  <div class="hm-modal-dialog">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id pulvinar libero. Mauris tempor eget elit eget elementum. Praesent porttitor justo vel varius consectetur. Praesent elementum, mauris et cursus tempor, sem lacus commodo enim, sit amet tempor elit tortor in tellus. Cras pulvinar convallis tortor, ac mattis augue laoreet nec. Nunc sit amet nulla sem. Fusce at metus mollis augue porttitor vestibulum. Maecenas condimentum hendrerit mauris, scelerisque luctus dolor facilisis eu. Aliquam posuere hendrerit cursus. 
  </div>
</div>

.hm-modal-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000;
  overflow-y: auto;
  
  .hm-modal-dialog {
    position: absolute;
    left: 50%;
    top:50%;
    max-width: 650px;
    width: 80%;
    background-color: #fefefe;
    padding: 10px;
    transform: translate(-50%, -50%);
  }
}