Knowledge Walls
Venkatesan
Hyderabad, Andhra Pradesh, India
Passcode:
Page Middle with blocked background in Div Popup boxes of WEB UI Tips and Tricks
1133 Views
HTML
<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>
CSS
#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;
}
JAVASCRIPT
function popup_close(){
   document.getElementById("bg_blocking_layer").style.display = "none";
}

function popup_open(){
   document.getElementById("bg_blocking_layer").style.display = "block";
}
Demo & Output 
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
Best Lessons of "WEB UI Tips and Tricks"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details