I have an application for which I want to get some input from the user and since the UI is already overloaded, I decided to that using a pop-up window. Since I want to make sure the user is entering the information in the pop-up or returns to the application a modal (stays on top) window is one course of action.
This is the code I used in the window that opens the popup window:
<html>
<head>
<title>Parent Window</title>
<script type=”text/javascript”>
var popup = null;
var count = 0;
var pop_name = “offshoot”;
var pu_open = false;
function open_modal()
{
var pop_local = pop_name + count;
popup = window.open(“offshoot.html”, pop_local, “width=640,height=480,status=yes”);
count++;
}
function do_modal()
{
try
{
popup.focus();
}
catch(e)
{
}
}
document.onkeyup=do_modal;
document.onmousedown=do_modal;
document.onmousemove=do_modal;
</script>
</head>
<body>
<a href=”javascript:open_modal()”>Open modal popup</a>
</body>
</html>
As for the popup window:
<html>
<head>
<title>Offshoot window</title>
<script type=”text/javascript”>
</script>
</head>
<body >
<h1>This is modal?</h1>
<textarea cols=”40″ rows=”5″ id=”comment” name=”comment”></textarea>
</body>
</html>
There are two bits to look at:
- The big idea deals with the popup window retaining the focus with the
onblur="self.focus()" - Because IE exists, we have to circumvent some silly errors, such as:
The callee (server [not server application]) is not availableand disappeared;all connections are invalid. The call did not execute.
One way to avert that is follow this advice and modify the name of the pop-up window – which I do using thecountvariable.
