How can I create a pop-up window using a new page as the pop-up source?
Question
I want to pop up a panel when a "createbutton" is clicked, I am using a panel and adding some textbox and buttons inside the panel. I am able to make the pop up panel by designing it in the same page where the createbutton is present. can I make the pop up in a separate page and make it pop up when I click the createbutton
2 answers
solution1
0 2011-08-28 00:26:22
Sure. You could create an iframe and then set the source as the panel you're creating.
Let's say you have two html pages panel.html and main.html
Your panel.html can simply be
<html>
<body style="background-color:red">
Hi!
</body>
</html>
and your main.html
<html>
<body style="background-color:yellow">
<iframe src="panel.html" style="height:300px;width:300px;border:0px;display:none;" id="myPanel"></iframe>
<a href="#" onclick="document.getElementById('myPanel').style.display='block';return false">Show Panel</a>
</body>
</html>
This should show a yellow page with a hyperlink of "Show Panel". When you click on Show Panel, it will show the iframe of your panel.html.
If you're using ASP.NET MVC, you can do this by creating a View that can be called down with some Ajax/JQuery code. If you're looking for something along that approach, I can post some code for that.
solution2
0 ACCPTED 2011-08-28 00:35:25
Gokul,
Yes, you can put the panel in a separate page and make it appear when you click the create button. Here's one alternative (not my favorite but it doesn't depend on anything extra besides standard javascript):
When you click the "create button" open a new browser window resized exactly to match the panel's size. This can be done with javascript easily as follows:
< input onclick="javascript:window.open('page.aspx','title','status=0,toolbar=0,width=350,height=250');" type="button" value="Create" />
On the page that you popped up containing the panel (pagecontainingPanel.aspx - according to my example), you can have code to close the window once you perform some action. For example, if you have a button that's supposed to save some data to the database and comeback to the parent page, you could do something like:
{
///Perform server side process. If successfully executed close this window.
protected void btnSubmit_Click(object sender, EventArgs e)
if(EverythingOK)
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=\"text/javascript\"> function CloseMe() {");
cstext2.Append("window.close();} </");
cstext2.Append("script>");
cs.RegisterStartupScript(cstype, csname2, cstext2.ToString(), false);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.