#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";
}
|