Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Open Popup div with disabled background using Javascript
<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.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;
}
</style>
<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) {
hide('popDiv');
}
};
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<table border="1" id="popup">
<tr>
<td>
This is can be used as a popup window
</td>
</tr>
<tr>
<td>
Click Close OR escape button to close it
<a href="#" onClick="hide('popDiv')">Close</a>
</td>
</tr>
</table>
</div>
<CENTER>
<h3>
Simple popup div with disabled background
</h3>
<br/>
<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
</CENTER>
</BODY>
</HTML>
@IsaacMwauraMuturi
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

@diek
Copy link

diek commented Nov 6, 2015

Helpful, thanks!

@Anyoks
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.

@kakaielviso
Copy link

kakaielviso commented Jun 18, 2018

very helpful, regards

@vincerubinetti
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.

@vikasaddress
Copy link

vikasaddress commented Jul 1, 2021

so nice and very helpful ,

Regards,
Vikas
https://dotnetbasic.com

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