This article explains how to open popups using JavaScript in ASP.Net. Also how one can exchange data between popup and the parent page

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)