Link to home
Start Free TrialLog in
Avatar of Dovberman
DovbermanFlag for United States of America

asked on

How to open a popup window in asp.net

I have a popup window named PopUpWindow.aspx. PopUpWindow.aspx has a button to close itself. I need to open and close this window from a window named EvalSymbol.aspx.

This is what I have.


PopUpWindow.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">

<script language='JavaScript' type='text/JavaScript'>
         
        function CloseWindow()
        {
            var url = "/Admin/EvalSymbol.aspx";
           
            window.opener.location.href = url;
            window.close();
        }
 
    </script>

  <asp:Button ID="btnClose" runat="server" Text="Close Me" />

</asp:Content>

PopUpWindow.aspx needs to be opened from a page named EvalSymbol.aspx.

EvalSymbol.aspx.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">

<script language='JavaScript' type='text/JavaScript'>

    function OpenPopWindow()
    {
        var url = "PopUpWindow.aspx";

        window.open(url, "popUp", "width=480, height=500, top=0, left=0, menubar=no, resizable=no, " +
                        "scrollbars=yes, status=no", '');
    }
 
    </script>

<asp:Button ID="btnOpenPopUp" runat="server" Text="Open Popup" Width="87px" />

The PopUpWindow opens when btnOpenPopUp is clicked even though there is no command name argument for btnOpenPopUp. I do not know why.

<asp:Button ID="btnClosePopUp" runat="server" Text="Close Popup" Width="87px" CommandName="btnClosePopup_Click" />

Code behind

protected void btnClosePopup_Click(object sender, EventArgs e)
        // Closes the pop up window
    {
          // What do I need here?
    }

Thanks,
Avatar of santhimurthyd
santhimurthyd
Flag of United States of America image

If you don't want to any code behind functionality based on the input in Popupwinodw, Use normal html button on click call an Javascript function to close the window

<script langugae="javascript">
function CloseWindow()
{
   window.close();
}
</script>
When you open a pop-up window, you need to create a reference to it.  You use use that reference to close the window from the parent.  You are opening a window with a URL, but not specifying the a reference.  Imagine if you opened up five windows, the browser would not know which one to use when you called .close().

Have a look here, the reference is a JavaScript variable created when the pop-up window is launched.

http://www.javascript-coder.com/window-popup/javascript-window-close.phtml
Actually you might be able to just get away with this because I see you've called the window "popUp" which acts as a reference:

        function CloseWindow() {
            popUp.close();
        }

Open in new window


Or this which should check the window isn't already closed first...

function CloseWindow() {
      if(false == popUp.closed)
      {
         popUp.close();
      }
   }

Open in new window

Avatar of Dovberman

ASKER

I do not understand.

Where do I call the function that closes the popup window?

protected void btnClosePopup_Click(object sender, EventArgs e)
        // Close the pop up window
    {
          How do I call the CloseWindow() function?
    }

<<I see you've called the window "popUp" which acts as a reference:
Where have I called the window "popUp" ?
ASP.NET works on the code-behind - e.g. on the server, so it can't directly close a pop-up window.

Instead, what you need to do is to output the JavaScript to close the window at the point you are ready, e.g. when somebody causes a page post back via a button press.

In that case, you could do something like this:

protected void btnClosePopup_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.AppendLine("<script type=\"text/javascript\">");
sb.AppendLine("function CloseWindow() {");
sb.AppendLine("      if(false == popUp.closed)");
sb.AppendLine("      {");
sb.AppendLine("         popUp.close();");
sb.AppendLine("      }");
sb.AppendLine("   }");
sb.AppendLine("</script>");
Page.Header.Controls.Add(new LiteralControl(sb.ToString));         
}

Open in new window

When the button is pushed, the JS will be injected into the <head> area.  This is not persistent though, so will disappear after any subsequent postbacks as its a dynamic control that's being added.
If you need it to persist, better to just write the function directly into the <head> using static HTML.
What I need may not be possible or perhaps I incorrectly stated my need.

This is my situation:

A window named PopUpWindow.aspx needs to be programatically opened from code behind in EvalSymbol.aspx

EvalSymbol.aspx.cs

 protected void PrepareNotes()
   
    {
        // Open PopUpWindow.aspx. This is where I need help.

        // Populate textbox control of PopUpWindow.aspx named txtDetails
        // This is a second need which is beyond the scope of the current ASK.
   
    }

Thanks,
protected void PrepareNotes()
   
    {
        // Open PopUpWindow.aspx. This is where I need help.
        // Ideally this can be done without needing to click on an href.
        // Otherwise an href can be triggered here.

        // Populate textbox control of PopUpWindow.aspx named txtDetails
        // This is a second need which is beyond the scope of the current ASK.
   
    }

Thanks,
Why do you need to open a pop-up window from code-behind please?  What is the problem with doing it directly from a page element?
Forget my last question.  Here's full working code to do what you need.  Sorry its in VB but you can convert it easily enough.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
		<asp:Button ID="btn_open" runat="server" Text="Open" />
		<asp:Button ID="btn_close" runat="server" Text="Close" />
    </div>
    </form>
</body>
</html>

Open in new window


Partial Class _Default
	Inherits System.Web.UI.Page

	Protected Sub btn_open_Click(sender As Object, e As EventArgs) Handles btn_open.Click
		Dim sb As New StringBuilder
		sb.AppendLine("<script type=""text/javascript"">")
		sb.AppendLine("function OpenWin() {")
		sb.AppendLine("		var myWin = window.open('PopUpWindow.aspx','myPopUpName','status=1,width=500,height=350');")
		sb.AppendLine("}")
		sb.AppendLine("OpenWin();")
		sb.AppendLine("</script>")
		Page.Header.Controls.Add(New LiteralControl(sb.ToString))
	End Sub

	Protected Sub btn_close_Click(sender As Object, e As EventArgs) Handles btn_close.Click
		Dim sb As New StringBuilder
		sb.AppendLine("<script type=""text/javascript"">")
		sb.AppendLine("function CloseWin() {")
		sb.AppendLine("		var myWin = window.open('','myPopUpName');")
		sb.AppendLine("		myWin.close();")
		sb.AppendLine("}")
		sb.AppendLine("CloseWin();")
		sb.AppendLine("</script>")
		Page.Header.Controls.Add(New LiteralControl(sb.ToString))
	End Sub

End Class

Open in new window

EvalSymbol.aspx does many things including getting text from a database. It also has an href that opens a financial website. The financial website needs to be reviewed. Instructions for analyzing stocks need to be copied from textboxes in EvalSymbol.aspx to textboxes in PopUpWindow.aspx .

EvalSymbol.aspx and the financial page cannot be seen at the same time. I do not wish to click back and forth between the two.

PopUpWindow is movable and allows viewing of the instructions while the financial site is the active window.
PopupNeed1.jpg
Popup2.jpg
Rouchie,

The code you presented will work. However I had asked the wrong question.
Instead of an open and close button, I need to programatically open and close the popup from within a procedure  in my main page.

Thanks,
If I understand correctly, you don't need a pop-up to do this.  You would be better using an in-page hovering element that you update via JavaScript.  Something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		function ShowToolTip(t) {
			$('#tooltip').css('display', 'block');
			$('#tooltip').text(t);
		}

		function HideToolTip() {
			$('#tooltip').css('display', 'none');
		}
		//]]>
	</script>
	<style type="text/css">
		#tooltip {display:none; position:fixed; right:10px; top:10px; width:300px; height:100px; background-color:#f7eb8b; border:1px solid black; padding:1em}
	</style>
</head>
<body>
    <form id="form1" runat="server">
	<div id="tooltip"></div>
    <div>
		<asp:Button ID="btn_open" runat="server" Text="Hover Here" OnClientClick="return false;" onmouseover="ShowToolTip('Here is some useful information for the first button');" onmouseout="HideToolTip();" />
		<asp:Button ID="btn_close" runat="server" Text="Hover Here" OnClientClick="return false;" onmouseover="ShowToolTip('Here is some more priceless information');" onmouseout="HideToolTip();" />
    </div>
    </form>
</body>
</html>

Open in new window

Hover works. I can  use this somewhere else.  Hover does not create the floating window that I need to use when navigating on the called financial site.
Is there an attribute that I can put here to create a floating tooltip?

<style type="text/css">
            #tooltip {display:none; position:float; right:10px; top:10px; width:300px; height:100px; background-color:#f7eb8b; border:1px solid black; padding:1em}
      </style>
protected void btnOpenPopUp_Click(object sender, EventArgs e)
   
    {
        // Opens PopUpWindow.aspx but hides the main window
       // Response.Redirect("EvalStockHelp.aspx");
       
        // Need code to open the poup window as a floating window.

        ????  
    }

Thanks
ASKER CERTIFIED SOLUTION
Avatar of Rouchie
Rouchie
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The separate pop-up displays the financial web site that I need. The Website url is dynamic and built by main page logic. Browser differences are not a factor. I as Admin am the only user.

The issue is now nearly solved.  I found out how to pop-up the web page while keeping the main page visible and active.

Main Page aspx

<script type="text/javascript">

 function popevalclick()
 {
     my_window = window.open("http://money.cnn.com", null, "height=600,width=600,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes");
 }
</script>

<body>
    <form id="form1" runat="server">
   
    <div>
     
<asp:Button ID="btnOpenPopUp" runat="server" Text="Open Popup" Width="87px"
        onclick="btnOpenPopUp_Click"  />
         
<p>
      <a href="javascript: popevalclick()">Open Eval Window</a>  
      </p>

Here is the remaining need:

 The url string "http://money.cnn.com" is changed dynamically while using the main page.
I need to write the new string into the javascript.

Assume the new string is "http://money.msn.com/stocks/"

Consider the main page code behind the btnOpenPopUp button

 protected void btnOpenPopUp_Click(object sender, EventArgs e)

    {

         string strNewUrl = "http://money.msn.com/stocks/";
         
         // replace the window.open url parameter with strNewUrl
         //my_window = window.open("http://money.cnn.com",.....
         //needs to be replaced by  //my_window = window.open(strNewUrl,.....

         // the code below does not work.

        ClientScriptManager cs = Page.ClientScript;
        StringBuilder strScript = new StringBuilder();
        strScript.Append("<script language=JavaScript>");
        strScript.Append("function popevalclickclick(){");
        strScript.Append(strNewUrl );
        strScript.Append("}");
        strScript.Append("</script>");
         //


Thanks,
Problem solved.

There are only 11 variations of the pop-up form.
I will set static instruction text from a table into each of the 11 forms.

Then I will use javascript to create 11 href links on the main form.
I will choose the link I need when I run the main form.

Thanks for all your help.  I learned a lot.
Problem solved.

There are only 11 variations of the pop-up form.
I will set static instruction text from a table into each of the 11 forms.

Then I will use javascript to create 11 href links on the main form.
I will choose the link I need when I run the main form.

Thanks for all your help.  I learned a lot.