fixed
.container{
height: 1500px;
width: 100%;
position:relative;
background-image:linear-gradient(-45deg, #fff 50%, #ffc0cb 50%, #ffc0cb);
}
.top{
width:100%;
height:50px;
background:#00f;
position:fixed;
top:5px;
}
.bottom{
width:100%;
height:50px;
background:#00f;
position:fixed;
bottom:5px;
}
.overlay{
height: 500px;
width: 100%;
top:0;
left:0;
position:fixed;
z-index: 9999;
display:none;
}
.dialog{
height: 500px;
width: 500px;
//top:0;bottom:0;
//left:0;right:0;
top:200px;
left:200px;
position:absolute;
background: green;
}
.btn{
width:100px;
height:50px;
font-size: 20px;
}
function show_overlay(){
var x;
x = document.getElementById('overlay');
x.style.display = 'block';
x = document.getElementById('container');
x.style.opacity = 0.2;
}
function close_overlay(){
var x;
x = document.getElementById('overlay');
x.style.display = 'none';
x = document.getElementById('container');
x.style.opacity = 1.0;
}
body
#container.container
.top
button.btn(onclick="show_overlay()") click!
.bottom
.overlay#overlay
.dialog
button.btn(onclick="close_overlay()") click!