locked
Dynamically create "close button" in modal pop up RRS feed

  • Question

  • User-218090889 posted

    Hi friends,

    I am trying to achieve something with modal pop up.

    I have a modal pop up in page A in my site which will open page B on the modal pop up, and inside the same modal pop up, page B
    will perform a task and then redirect to page C which will contain in the same modal pop up.
    Here I want to disable the "Close button" in the modal pop up when page B is active, and enable it when page C redirected.

    below is my modal pop up mark up

     <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btPageB"  
        CancelControlID="btClose" BackgroundCssClass="Background">  
    </cc1:ModalPopupExtender>  
    <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">  
        <iframe style=" width: 370px; height: 300px;" id="Irm1" src="page_B.aspx" runat="server"></iframe>  
       <br/>  
        <asp:Button ID="Button2" runat="server" Text="Close" />  
    </asp:Panel>

    Please anyone with idea on how I can resolve this

    Wednesday, April 15, 2020 11:06 AM

All replies

  • User1535942433 posted

    Hi Enzyme,

    Accroding to your description,as far  as I think,you could add the iframe scrouce when you click the button of page.Then ,if the iframe load, you could check  whether the content's name  of iframe.If the page is page C,you could enable to use the close button.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/MicrosoftAjax.js"></script>
       <script type="text/javascript">
           function displayFrame() {
               $("#Irm1").attr("src", "page_B.aspx");
               $("#Button2").hide();
               $("#Irm1").on("load", function () {
                   console.log(this.contentWindow.location);
                   if (this.contentWindow.location.pathname == "/page_C.aspx") {
                        $("#Button2").show();
                    }
               })
           }
       </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <h1>This is Page A</h1>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:Button ID="btPageA" runat="server" Text="Show ModalPopupB" OnClientClick="displayFrame()" />
                <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btPageA"
                    CancelControlID="btClose" BackgroundCssClass="Background">
                </cc1:ModalPopupExtender>
                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center">
                    <iframe style="width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>
                    <br />
                    <asp:Button ID="Button2" runat="server" Text="Close" />
                </asp:Panel>
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    Thursday, April 16, 2020 4:06 AM
  • User-218090889 posted

    @Yijing Sun

    I tried your code as it is, it works but at page_C load the button does not show.

    Saturday, April 18, 2020 9:44 AM
  • User1535942433 posted

    Hi Enzyme,

    Accroding to your description,I suggest you could debug and breakpoint to check what is your problems.

    Besides,you could post your current codes to us.It will help us to solve your problems.This is my full codes.

    More details,you could refer to below codes:

    PageA:

      <script src="Scripts/jquery-3.4.1.min.js"></script>
       <script type="text/javascript">
           function displayFrame() {
               $("#Irm1").attr("src", "page_B.aspx");
               $("#Button2").hide();
               $("#Irm1").on("load", function () {
                   console.log(this.contentWindow.location);
                   if (this.contentWindow.location.pathname == "/page_C.aspx") {
                        $("#Button2").show();
                    }
               })
           }
       </script> 
    
    
    <div>
                <h1>This is Page A</h1>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:Button ID="btPageA" runat="server" Text="Show ModalPopupB" OnClientClick="displayFrame()" />
                <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btPageA"
                    CancelControlID="btClose" BackgroundCssClass="Background">
                </cc1:ModalPopupExtender>
                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center">
                    <iframe style="width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>
                    <br />
                    <asp:Button ID="Button2" runat="server" Text="Close" />
                </asp:Panel>
            </div>

    PageB.aspx:

     <h1>This is Page B</h1>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    PageB code-behind:

     protected void Button1_Click(object sender, EventArgs e)
            {
                Response.Redirect("page_C.aspx");
            }

    PageC.aspx:

    <div>
                <h1>This is Page C</h1>
            </div>

    Best regards,

    Yijing Sun

    Monday, April 20, 2020 1:23 AM
  • User-218090889 posted

    yij sun

    Hi Enzyme,

    Accroding to your description,I suggest you could debug and breakpoint to check what is your problems.

    Besides,you could post your current codes to us.It will help us to solve your problems.This is my full codes.

    More details,you could refer to below codes:

    Could it be the JQuery document I use is the problem?

    I used  <script src="Scripts/jquery-3.5.0.min.js"></script>

    because I could not download jquery-3.4.3.min.js


    Tuesday, April 21, 2020 11:22 AM
  • User1535942433 posted

    Hi Enzyme,

    Enzyme

    because I could not download jquery-3.4.3.min.js

    Accroding to your description,could you tell us why you couldn't download jquery-3.4.3.min.js?Due to this issue involving your personal information, we cannot send mail to your mailbox.

    I have create a demo to use online jquery-3.5.0.min.js and it works fine.I suggest you could press F12 and  breakpoint at the line of $("#button").show().You could check whether the line is executed.

    If you want to download jquery-3.4.1.min.js,I suggest you could do following these three methods:

    1.https://www.nuget.org/packages/jQuery/3.4.1

    2.Use csdn to download jquery-3.4.3.min.js.

    3.Right click your project-->select Manage Nuget Package-->browser jquery and install jquery-3.4.3.min.js

    Besides,I suggest you could post your current codes.It will help us to solve your problems.

    Best regards,

    Yijing Sun

    Wednesday, April 22, 2020 2:04 AM
  • User-218090889 posted

    Besides,I suggest you could post your current codes.It will help us to solve your problems.

    I tried debugging the code, I discover the the "$("#Button2").hide();" fires, but the execution was not reaching the "$("#Button2").show();"

    below is the entire mark up of my test page

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="page_A.aspx.cs" Inherits="TestWork.page_A" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
      <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/MicrosoftAjax.js"></script>
    
       <script type="text/javascript">
           function displayFrame() {
               $("#Irm1").attr("src", "pade_B.aspx");
               $("#Button2").hide();
               $("#Irm1").on("load", function () {
                   console.log(this.contentWindow.location);
                   if (this.contentWindow.location.pathname == "/page_C.aspx")
                   {
                       $("#Button2").show();
                   }
               })
           }
       </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <h1>This is Page A</h1>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:Button ID="btPageA" runat="server" Text="Show ModalPopupB" OnClientClick="displayFrame()" />          
                <cc1:modalpopupextender ID="mp1" runat="server" popupcontrolID="Panl1" targetcontrolID="btPageA"
                    CancelControlID="Button2" backgroundcssclass="Background">
                </cc1:modalpopupextender>
                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center">
                    <iframe style="width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>
                    <br />
                    <button id="Button2">Close</button>
                </asp:Panel>
            </div>
            
        </form>
    </body>
    </html>
    

    please help me scrutinize the code and tell what I am missing.

    Monday, April 27, 2020 8:00 AM
  • User1535942433 posted

    Hi Enzyme,

    Accroding to your description and codes,I have a test and it works fine.I suggest you could sure the page C name  in javascript is same with the Redirect page name.At the same time, if page B,page C,page A exist in different folder,you need to note the address.

    I suggest you could breakpoint at the line of if (this.contentWindow.location.pathname == "/page_C.aspx") .Then you could select this.contentWindow.location.pathname and check the value of location.pathname.

    Besides,you could post full of codes about page A,page B, page C to us.It will help us to solve your problems.

    More details,you could refer to below codes:

    Page A:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/MicrosoftAjax.js"></script>
       <script type="text/javascript">
          function displayFrame() {
               $("#Irm1").attr("src", "page_B.aspx");
               $("#Button2").hide();
               $("#Irm1").on("load", function () {
                   console.log(this.contentWindow.location);
                   if (this.contentWindow.location.pathname == "/page_C.aspx")
                   {
                       $("#Button2").show();
                   }
               })
           }
       </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
               <h1>This is Page A</h1>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:Button ID="btPageA" runat="server" Text="Show ModalPopupB" OnClientClick="displayFrame()" />          
                <cc1:modalpopupextender ID="mp1" runat="server" popupcontrolID="Panl1" targetcontrolID="btPageA"
                    CancelControlID="Button2" backgroundcssclass="Background">
                </cc1:modalpopupextender>
                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center">
                    <iframe style="width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>
                    <br />
                    <button id="Button2">Close</button>
                </asp:Panel>
            </div>
        </form>
    </body>

    Page B:

    <h1>This is Page B</h1>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    Page B Code-behind:

     protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Response.Redirect("page_C.aspx");
            }

    Page C:

     <div>
                <h1>This is Page C</h1>
            </div>

    Best regards,

    Yijing Sun

    Tuesday, April 28, 2020 7:55 AM
  • User-218090889 posted

    yij sun

    I suggest you could breakpoint at the line of if (this.contentWindow.location.pathname == "/page_C.aspx") .Then you could select this.contentWindow.location.pathname and check the value of location.pathname.

    yij sun, I have try to find the bug all around, I could not find.
    I tried the to do breakpoint, but breakpoint could not Hit,

    It was showing
    The breakpoint will not currently be hit, No executable code of the debugger's target code type is associated with this line.

    so I tried to set "Attach to process", then it show "breakpoint will not currently be hit. no symbols loaded for this document"

    The full code is the same as the one you posted on the post.

    but in my production site I have the page on Master Page. below is the code, I have Scriptmanager in masterpage.

    NB: in my production page the PageB does not load, and the button shows.
          in my test page the pageB will load, button hides, then PageC will load but button will not show

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="UserPage.aspx.cs" Inherits="AllUsers.UserPage" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    
        <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
     <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/WebForms/MSAjax/MicrosoftAjax.js"></script>
    
       <script type="text/javascript">
           function displayFrame()
           {
               $("#Irm1").attr("src", "PageB.aspx");
               $("#Button2").hide();
               $("#Irm1").on("load", function ()
               {
                   console.log(this.contentWindow.location);
                   if (this.contentWindow.location.pathname == "PageC.aspx")
                   {
                       $("#Button2").show();
                   }
               })
           }
       </script>
    
    
       
            <div>
                <h1>This is Page A</h1>
                
                <asp:Button ID="btPageA" runat="server" Text="Show ModalPopupB" OnClientClick="displayFrame()" />          
                <cc1:modalpopupextender ID="mp1" runat="server" popupcontrolID="Panl1" targetcontrolID="btPageA"
                    CancelControlID="Button2" backgroundcssclass="Background">
                </cc1:modalpopupextender>
                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center">
                    <iframe style="width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>
                    <br />
                    <button id="Button2">Close</button>
                </asp:Panel>
            </div>
            
      </asp:Content>
    

    PageB

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageB.aspx.cs" Inherits="AllUsers.PageB" %>
    
    
    <asp:Button ID="ButtonB" runat="server" OnClick="ButtonB_Click" Text="Button" />
    
    

    PageB C#

     protected void ButtonB_Click(object sender, EventArgs e)
            {
                Response.Redirect("PageC.aspx");
            }

    PageC

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageC.aspx.cs" Inherits="AllUsers.PageC" %>
    

    Friday, May 1, 2020 7:17 AM
  • User1535942433 posted

    Hi Enzyme,

    Accroding to your description and code,there are two problems:

    1.Page A is a content page,so the iframe id will be changed and the id isn't Irm1.You could use like this:

    $("#<%=Irm1.ClientID%>").attr("src", "page_B.aspx");
    $("#<%=Irm1.ClientID%>").on("load", function () {})

    2.When you load Page C,the pathname need to be add / .Just like this:

    if (this.contentWindow.location.pathname == "/page_C.aspx")

    Result:

    Best regards,

    Yijing Sun

    Monday, May 4, 2020 2:19 AM