I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)
Here is the link to code:
<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .8;
filter: alpha(opacity = 80);
}
#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
<br></br>
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>
For some reason, I am not sure of, I couldn't make this code work in jsfiddle, but I have used the same code in one html file with tags for css and it is working fine.
Kindly help.
It works, but only if the Javascript comes before your onclick-handlers in the source code.
So you need to change the following setting in JSFiddle (the second dropdown must be set to "No wrap - in
<head>":In the updated fiddle, I also fixed the opacity issue. Your whole overlay had
opacity: 0.8;and that affects also all children of that overlay. Instead, you should use slightly transparentbackground-colorin rgba notation for overlay:rgba uses decimal number, in contrast to
#ccccccnotation, which uses hexa-decimal numbers.