#bg_blocking_layer {
   position: fixed;
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   width: 100%;
   height: 100%;
   margin: auto;
   background-color: rgba(0,0,0,0.5);
}

#layout_container {
   background-color: darkgreen;
   margin: auto;
   position: fixed;
   left: 0px;
   right: 0px;
   bottom: 0px;
   top: 0px;
   width: 50%;
   height: 30%;
   color: white;
   padding: 10px;
}

<div id="bg_blocking_layer">
    <div id="layout_container">
      Horizontal center layout on page with
      <button onclick="javascript:popup_close();">Close popup</button>
    </div>
</div>

<button onclick="javascript:popup_open();">Open popup</button>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>
<h1>page content</h1>

function popup_close(){
   document.getElementById("bg_blocking_layer").style.display = "none";
}

function popup_open(){
   document.getElementById("bg_blocking_layer").style.display = "block";
}