KW Online Tools Zone
Knowledge Walls
View All Tools Home
POPUP BOXES IN HTML CSS JAVASCRIPT
[Javascript editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<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 [Ctrl+Enter] - to run
#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); z-index: 9998; } #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; z-index: 9999; }
Javascript [Ctrl+Enter] - to run
function popup_close(){ document.getElementById("bg_blocking_layer").style.display = "none"; } function popup_open(){ document.getElementById("bg_blocking_layer").style.display = "block"; }
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved