Close the popup image when click on it

To close the popped up image when click on , do the following steps:

Create ShowImage.aspx page and add a image control with onclick property like:

asp:Image ID="Image1" runat="server" onclick = "window.open('','_self');window.close();"

And in the page load of ShowImage.aspx do this way:

if (Request.QueryString["image"] != null)
{
Image1.ImageUrl = Request.QueryString["image"];
}

Now, on the parent page write this script:

var Popup;
function popUp(url)
{
Popup = window.open(url, "Popup", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=100,height=100,left = 490,top = 262');
Popup.focus();
}
function ChangeImg(obj)
{
//Show in popup
var radio = obj.getElementsByTagName("input");
for (var i=0;i less than radio.length;i++)
{
if (radio[i].checked)
{
popUp("ShowImage.aspx?image=images/" + radio[i].value + ".jpg");
}
}
}

Note: Use the general sign for 'Less than' in the for loop. I am unable to publish here because it acts like HTML tags and won't let me go.

Images changing when clicking the radiobutton on the radiobutton list

If you have a ASP.NET C# form and use a radiobutton list. Suppose there are 4 radiobutton on the list.Default, no images loaded and when click the first radiobutton in the list, it displays a "1.jpg" and when click second radiobutton changes the image and so on...

For this, use the onclick function of the radiobuttonlist.

onclick = "ChangeImg(this);

and try this javascripts:

var Popup;
function popUp(url)
{
Popup = window.open(url, "Popup", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=100,height=100,left = 490,top = 262');
Popup.focus();
}
function ChangeImg(obj)
{
//Show in popupvar radio = obj.getElementsByTagName("input");

for (var i=0;i less than radio.length;i++)
{
if (radio[i].checked)
{
popUp("images/" + radio[i].value + ".jpg");break;
}
}
}

Auto close Popped up images after certain time

If you want to close your pop up image after 10 sec. just follow me:

Add a javascript function to the popup page
function Close()
{
window.close();
}
And to the body tag onload event add this

onload = "setTimeout('Close();', 10000)"

it will close the popup after 10 secs.

NOT save value on PostBack

If you have different ASP.NET controls in your application e.g checkbox, listbox, textbox, dropdowns etc. and you want to clear the value that it holds on PostBack. Then do the

EnableViewStateProperty to False.

or you can do

Textbox1.Text="";

after submitting form data.