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

This comment has been minimized.

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

This comment has been minimized.

Copy link

diek commented Nov 6, 2015

Helpful, thanks!

@Anyoks

This comment has been minimized.

Copy link

Anyoks commented Mar 31, 2016

Very helpful Thanks!

@ghost

This comment has been minimized.

Copy link

ghost commented Jan 31, 2018

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

@kakaielviso

This comment has been minimized.

Copy link

kakaielviso commented Jun 18, 2018

very helpful, regards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.