There is much to talk about here:
After reading your post I created an example to help demonstrate a few
important points:
Here is our "to do" list:
1) Create a window popup routine for your sign-in. I got a little fancy on
this one.
This routine allows you to enter the size of the popup you want and then
places
the popup window in the center of the screen based on your size selection
and
window resolution. Also, I added a variable so that you can add in a
location (url).
2) Pass a variable to the newly opened window and display it. I used an
input box to display
the variable in the popup window. You can make this a hidden field within a
form or whatever
meets your requirement.
This will work in FireFox, IE, and Netscape
CLICK HERE FOR DEMO
popup_any_window.htm - window containing link
Code:
<HTML>
<HEAD>
<TITLE>Popup Any Window</TITLE>
<STYLE type=text/css>
body {background:white; font-family: Tahoma; color: #32433D ; font-size: 10pt; margin: 10px;}
a { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration:none }
a:link { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration:none }
a:hover { font-family: Tahoma; font-size: 10pt; text-decoration: none; color: #7D959B }
</STYLE>
<SCRIPT language="JavaScript" type="text/javascript">
function PopUpAnyWindow(w,h,urla,v)
{
// Place whatever variable value that was passed to this function into the variable holder input element
document.getElementById('variableHolder').value=v
// Setup the dimension for located the popup and pop it open
var popUpX = (screen.width/2)-w/2; var popUpY = (screen.height/2)-h/2;
var pos = "left="+popUpX+",top="+popUpY;
window.open(urla,'myPopup',"width="+w+",height="+h+","+pos);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="hidden" id="variableHolder">
<P><A href="javascript:PopUpAnyWindow(500,300,'SignInWindow.htm','firstpopup')">Pop FIRST Window</A><BR>
[width (w)=500, height (h)=200, location (url)=SignInWindow.htm, passed variable (v)='firstpopup']
</P>
<P><A href="javascript:PopUpAnyWindow(400,200,'SignInWindow.htm','secondpopup')">Pop SECOND Window</A><BR>
[width (w)=400, height (h)=200, location (url)=SignInWindow.htm], passed variable (v)='secondpopup']
</P>
<P>Click above and popup will activate with the respective settings.</P>
</BODY>
</HTML>
SignInWindow.htm - window that receives the variable
Code:
<HTML>
<HEAD>
<META http-equiv="Content-Language" content="en-us">
<TITLE>Popped "Sign-in" Window</TITLE>
<STYLE type=text/css>
body {background:white; font-family: Tahoma; color: #32433D ; font-size: 10pt; margin: 10px;}
a { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration:none }
a:link { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration:none }
a:hover { font-family: Tahoma; font-size: 10pt; text-decoration: none; color: #7D959B }
</STYLE>
<SCRIPT language="JavaScript" type="text/javascript">
function getVariable()
{document.getElementById('passedVariable').value=window.opener.document.getElementById('variableHold er').value;}
</SCRIPT>
</HEAD>
<BODY onload="getVariable()">
<P>Sign-in Window</P>
<P>This is the variable passed: </P>
<P><INPUT type="text" id="passedVariable" size="20"></P>
</BODY>
</HTML>
Explanation:
As you can see "PopUpAnyWindow" function receives 4 variables from the link;
width (w), height (h),
location of popup window (url), and lastly the variable value you wish to
pass to the newly opened window.
Obviously you have control over the size of this window by setting the w and
h values. Also,
"<A href="javascript:PopUpAnyWindow(500,300,'SignInWindow.htm','firstpopup')">"
here is where you set the variable
value you wish to pass.
The "PopUpAnyWindow" routine doesn't actually pass the variable to the new
window. Rather it places the value into a
hidden input element located in the body. Later when we pop the window this
value will be taken using
JavaScript located in the popped window.
Once the window pops open the onload in the body of the popup window
"activates" the getVariable() routine which, in turn,
sets the value of the input element (in the popped window) to the value held
in the hidden input element
(located in the parent window).
|
|
