Open a PopUp
To open a pop up window the JavaScript command is window.open()
Below is a function that opens a new popup window which accepts the url of the page to be opened.
var PopUpObj;
function popUp(url)
{
PopUpObj = window.open(url);
PopUpObj.focus();
}
Example
popUp("Default.aspx");
popUp("http://www.aspsnippets.com")
Optional Parameters
ID Id of the PopUp Window
toolbar Enable/Disable toolbar of the Browser values Accepted values (1/0, yes/no)
scrollbar Enable/Disable scrollbar of the Browser values Accepted values (1/0, yes/no)
location Enable/Disable location field of the Browser values Accepted values(1/0, yes/no)
menubar Enable/Disable menubar of the Browser values Accepted values (1/0, yes/no)
resizable Enable/Disable resizing of the Browser values Accepted values (1/0, yes/no)
statusbar Enable/Disable statusbar of the Browser values Accepted values (1/0, yes/no)
width Width of the Browser in Pixels
height Height of the Browser in Pixels
top Position of the Browser on Y Axis in Pixels
left Position of the Browser on X Axis in Pixels
Example
var popUpObj;
function popUp(url)
{
popUpObj=window.open(url,"Popup","toolbar=no,scrollbars=no,location=no" +
",statusbar=no,menubar=no,resizable=0,width=100," +
"height=100,left = 490,top = 262");
popUpObj.focus();
}
Communication between Parent Window and Child Window (PopUp)
Parent.aspx has a TextBox txtParent
<input id="txtParent" type="text" />
PopUp Page has a TextBox txtChild
<input id="txtChild" type="text" />
This will be used in later examples.
Call a JavaScript Function in PopUp from Parent Page
PopUp.aspx
<script type = "text/javascript">
function childFunc()
{
return document.getElementById ("txtChild").value;
}
</script>
Parent.aspx
Below function callChildFunc() calls the JavaScript function childFunc() in the PopUp page PopUp.aspx
<script type = "text/javascript">
function callChildFunc()
{
if(popUpObj != null && !popUpObj.closed)
{
var val = popUpObj.childFunc();
alert(val);
}
}
</script>
Access a Control in PopUp from Parent Page
Parent.aspx
Here the parent page accesses a textbox in the PopUp page PopUp.aspx using the id of the control.
<script type = "text/javascript">
function getChildControl()
{
if(popUpObj != null && !popUpObj.closed)
{
var form1 = popUpObj.document.getElementsByTagName("form")[0];
alert(form1.txtChild.value);
}
}
</script>
Refresh/Reload PopUp from Parent Page
Parent.aspx
Here the refreshChild() function reloads the PopUp page PopUp.aspx
<script type = "text/javascript">
function refreshChild()
{
if(popUpObj != null && !popUpObj.closed)
{
popUpObj.location.reload();
}
}
</script>
Call a JavaScript Function in Parent from PopUp Page
Parent.aspx
<script type = "text/javascript">
function parentFunc()
{
return document.getElementById ("txtParent").value;
}
</script>
PopUp.aspx
Below function callParentFunc() calls a function parentFunc() in the Parent Page
<script type = "text/javascript">
function callParentFunc()
{
if(window.opener != null && !window.opener.closed)
{
var val = window.opener.parentFunc();
alert(val);
}
}
</script>
Access a Control in Parent from PopUp Page
PopUp.aspx
Here the PopUp page accesses a textbox in the Parent page Parent.aspx using the id of the control.
<script type = "text/javascript">
function getParentControl()
{
if(window.opener != null && !window.opener.closed)
{
var form1 = window.opener.document.getElementsByTagName("form")[0]
alert(form1.txtParent.value);
}
}
</script>
Refresh/Reload PopUp from Parent Page
Parent.aspx
Here the refreshParent() function reloads the Parent page
<script type = "text/javascript">
function refreshParent()
{
if(window.opener != null && !window.opener.closed)
{
window.opener.location.reload();
}
}
</script>
The above scripts are tested in the following browsers
1. Internet Explorer 7
2. Mozilla Firefox 3.0.5
3 Google Chrome
You can download the sample source code here.
PopUps.zip (2.31 kb)