Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Open Popup div with disabled background using Javascript
<TITLE>Popup div with disabled background</TITLE>
.ontop {
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .4;
filter: alpha(opacity = 50);
#popup {
width: 300px;
height: 200px;
position: absolute;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
function hide(div) {
document.getElementById(div).style.display = 'none';
//To detect escape button
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
<div id="popDiv" class="ontop">
<table border="1" id="popup">
This is can be used as a popup window
Click Close OR escape button to close it
<a href="#" onClick="hide('popDiv')">Close</a>
Simple popup div with disabled background
<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
Copy link

IsaacMwauraMuturi commented Oct 23, 2015

nice one, i like it.
But can we import the division to be displayed from another website
Eg. Click here to open a popup div

Copy link

diek commented Nov 6, 2015

Helpful, thanks!

Copy link

Anyoks commented Mar 31, 2016

Very helpful Thanks!

Copy link

ghost commented Jan 31, 2018

Nice one, Also found an another way to css popup window disable background Thanks.

Copy link

kakaielviso commented Jun 18, 2018

very helpful, regards

Copy link

vincerubinetti commented Jul 26, 2020

Note: this doesn't disable keyboard-focusing background elements. If you're designing a truly accessible application, you'll need a more complex solution than this.

Copy link

vikasaddress commented Jul 1, 2021

so nice and very helpful ,


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment