Welcome to WebmasterWorld Guest from 54.144.48.252

Forum Moderators: open

Message Too Old, No Replies

Keeping the focus on the parent window with child window above it

Focus on a window in the background

     
3:43 pm on Mar 18, 2008 (gmt 0)

5+ Year Member



Hi Everyone,

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

6:12 pm on Mar 18, 2008 (gmt 0)

WebmasterWorld Administrator httpwebwitch is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Instead of opening a new window, use a floating layer, positioned and styled with CSS.
7:57 am on Mar 19, 2008 (gmt 0)

5+ Year Member



Thanks for your reply httpwebwitch.

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.

9:23 am on Mar 19, 2008 (gmt 0)

5+ Year Member



Let's start simple.
<!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>
1:09 pm on Mar 19, 2008 (gmt 0)

WebmasterWorld Administrator httpwebwitch is a WebmasterWorld Top Contributor of All Time 10+ Year Member



then add a title bar with a "close" button:

<!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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month