Cacher is the code snippet organizer for pro developers

.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!