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>
3 Answers, 1 is accepted
0
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
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.
0
Dries
Top achievements
Rank 1
Rank 1
answered on 12 Feb 2018, 10:34 AM
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.
0
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.
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.
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
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.