Forum Moderators: open
I have a requirement which is as follows..
I have a button on a html page which opens another window on click of that button. The focus is on the child window once it is loaded.
Now what i want is that when i move away( by clicking on the parent window) from the child html window , a confirmation dailog should come up asking whether user really wants to move away from the child window. If the user confirms the same then the focus should go on the parent html window but the child window should still be on top of the parent window even though it is blurred. The user should be able to fill the parent form.
Request you all to help me on this....Please let me know if i have not conveyed the problem statement clearly.
Thanks in Advance
Can you please provide some more details as to how exactly this can be implemented..If you have a code sample, that would be of great help.I am not proficient with js and css.
Thanks again.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style type='text/css'>
#child{
position:absolute;left:5em;top:10em;
padding:0.5em;border:solid black 1px;background-color:cyan;
display:none
}
</style></head><body>
<button onclick="document.getElementById('child').style.display = 'block'">Show Child</button>
<div id="child">This is some child content</div>
</body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
#child{
position:absolute;left:5em;top:10em;
padding:0;
border:solid black 1px;
background-color:cyan;
display:none;
width:300px;
}
.titlebar{
background:#888;
display:block;
height:18px;
}
a.closebutton{
float:right;
width:18px;
height:18px;
background:#f00;
border:0;
padding:0;
margin:0;
cursor:pointer;
}
.popupcontent{
padding:10px;
}
</style><script>
function closepopup(id){
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<button onclick="document.getElementById('child').style.display = 'block'">Show Child</button>
<div id="child">
<div class="titlebar"><a class="closebutton" onclick="closepopup('child')">X</a>Your title here</div>
<div class="popupcontent">
This is some child content
</div>
</div>
</body>
</html>
