简体   繁体   English

如何使用新页面作为弹出源创建弹出窗口?

[英]How can I create a pop-up window using a new page as the pop-up source?

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 我可以在单独的页面中弹出窗口吗,当我单击createbutton时使其弹出吗

Sure. 当然。 You could create an iframe and then set the source as the panel you're creating. 您可以创建一个iframe,然后将源设置为要创建的面板。

Let's say you have two html pages panel.html and main.html 假设您有两个html页面panel.html和main.html

Your panel.html can simply be 您的panel.html可以简单地是

<html>
   <body style="background-color:red">
      Hi!
   </body>
</html>

and your main.html 和你的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. 单击“显示面板”时,它将显示panel.html的iframe。

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. 如果使用的是ASP.NET MVC,则可以通过创建一个可以用一些Ajax / JQuery代码调用的View来实现。 If you're looking for something along that approach, I can post some code for that. 如果您正在寻找某种方法,我可以为此发布一些代码。

Gokul, 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): 这是一种选择(不是我的最爱,但除了标准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: 可以使用javascript轻松完成,如下所示:

    < input onclick="javascript:window.open('page.aspx','title','status=0,toolbar=0,width=350,height=250');" <输入onclick =“ javascript:window.open('page.aspx','title','status = 0,toolbar = 0,width = 350,height = 250');” type="button" value="Create" /> 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. 在弹出的包含面板的页面上(根据我的示例,页面包含Panel.aspx),执行一些操作后,您就可以使用代码关闭窗口。 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);
        } 

    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM