IFrame uses page with radwindow (modal popup)

4 posts, 0 answers
  1. Dries
    Dries avatar
    2 posts
    Member since:
    Aug 2017

    Posted 07 Feb 2018 Link to this post

    Hi,

    I have 2 web pages

    • Page A -> contains an image button.
    • Page B -> contains an IFrame referring to Page A (I do not manage this page)

    When I press the image button a modal popup window opens.
    Only problem is the window (modal popup) should be opened on top of page B.
    It should be centered on page B and everything else on page B should be grayed out.

    Is this possible?

    Page A:

    <html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br>    <link rel="stylesheet" type="text/css" href="App_Themes/EriksBlue.css" /><br>    <title>Catalogs</title><br>    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /><br></head><br><body><br>    <form id="form1" runat="server"><br>    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"><br>        <Scripts><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /><br>            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /><br>        </Scripts><br>    </telerik:RadScriptManager><br>    <script type="text/javascript"><br>        //Put your JavaScript code here.<br>        function openPopUp(url) {<br>           window.radopen(url, "CatalogWindow", window.innerWidth * 0.8, window.innerHeight * 0.8);<br>        }<br>    </script><br><br><telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" Animation="FlyIn"><br>    <Windows><br>        <telerik:RadWindow RenderMode="Lightweight" VisibleStatusbar="false" VisibleTitlebar="true" ID="CatalogWindow" runat="server" Modal="true" Behaviors="Close"><br>        </telerik:RadWindow><br>    </Windows><br></telerik:RadWindowManager><br><br> <telerik:RadPanelBar RenderMode="Auto" runat="server" ID="rpbCatalogs" Width="100%"><br>        </telerik:RadPanelBar><br>    </form><br></body><br></html>

     

    Page B:

    <html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br>    <title></title><br></head><br><body><br>    <iframe src="http://localhost:7688/" style="border:none;" width="600" height="800"><br><br>    </iframe><br></body><br></html>

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    279 posts

    Posted 12 Feb 2018 Link to this post

    Hi Dries,

    Yes, it is possible. All you need to do, is to apply some style on the page where the frame is located, maximize the frame to fill the entire window.

    Take a look at the attached sample that works with the scenario you have described.

    I hope this will help.

    Kind regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dries
    Dries avatar
    2 posts
    Member since:
    Aug 2017

    Posted 12 Feb 2018 Link to this post

    Hi Atilla,

    The only thing getting grayed out is the iframe. I want to gray out everything on page B!
    I think your solution just increases the size of the Iframe, but I want to keep the size of the frame, click the img button (of Page A in frame), open a modal popup (centered on whole page) & gray out the entire page (Page B).

    Even more, I do not have access to page B. Someone will use my page (Page A) and show it in an Iframe on their site.

  4. Attila Antal
    Admin
    Attila Antal avatar
    279 posts

    Posted 13 Feb 2018 Link to this post

    Hi Dries,

    I assume you want to open a modal window by clicking on a button inside the IFrame, is that correct? If that is the case, you can try the following approach to achieve that behavior.

    The owner of PageB may attach the generic onload event to the IFrame, which will fire once the frame is loaded. 
    <iframe id="myframe" src="PageA.aspx" onload="frameLoad(this)"></iframe>

    JavaScript - Using the onload event listener of IFrame, find the desired button inside it, then and add a click event listener to the button. If the button is clicked, the click event listener will open a RadWindow on PageB and gray out the entire page, not only the IFrame.
    function frameLoad(frameElement) {
        var btnElement = $(frameElement.contentDocument).find("#RadButton2"); // find the desired button inside the IFrame (PageA)
        if (btnElement.length > 0) { // check if button object exists
            btnElement[0].control.add_clicking(btnClicking); // add click event listener to the button
        }
    }
    function btnClicking(sender, args) { // click event handler of the button
        args.set_cancel(true) // cancel the click event to prevent button's original actions
        window.radopen("", "CatalogWindow", window.innerWidth * 0.8, window.innerHeight * 0.8); // open radwindow on the current page (PageB)
    }

    Attached you can find a sample that resembles this scenario. Please give it a try to see if that works for you.

    Kind regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top