Modal radwindow over the top of a PDF in IE11

2 posts, 0 answers
  1. John
    John avatar
    6 posts
    Member since:
    May 2012

    Posted 05 Mar 2015 Link to this post

    If I have a radwindow and want it to appear over the top of a PDF file that is embedded in the page using an iframe, there can be problems getting the radwindow to appear over the top of the PDF. It normally appears behind it in IE11 but above it in Chrome.
    I discovered that the setting overlay="true" solves the problem for the radwindow itself, but it does not solve the problem for the modalising grey area. The grey area still shows behind the PDF, which looks a bit weird.
    Is there a way to fix this?
  2. Marin Bratanov
    Marin Bratanov avatar
    3555 posts

    Posted 06 Mar 2015 Link to this post

    Hi John,

    The key to this is that only iframes can be shown over heavyweight objects (like PDFs, Silverlight, Java, ActiveX). The Overlay property of the RadWindow puts an iframe behind the RadWindow to achieve that.

    The issue with the modal background is that it does not get such an iframe. If it did, that iframe would not be transparent (if it were transparent, it would not stay above the PDF), so it would defeat the purpose of the modal backround.

    What I can suggest as ideas you can consider, are:

    • hide the iframe when you show windows and re-show it when you close them. Here is the basic idea:
      function ShowRadWindow() {
          var oWnd = $find("<%=RadWindow1.ClientID%>");
          $get("theIframeId").style.display = "none";
      function reShowPDF(sender, args) {
          $get("theIframeId").style.display = "";
    • OR, create an overlay iframe for the modal background dynamically. In this case you would not need the overlay iframe from the RadWIndow so you should set its Overlay property to false. Of course, you can keep an iframe with the needed settings (you can copy them from the dev toolbar of an existing overlay frame) and simply show it and hide it with the RadWindow.
      Here is a basic example of creating the overlay frame dynamically, where these functions are handlers for the OnClientShow and OnClientClose respectively:

      function createModalBackgroundOverlay(sender, args) {
          if (!sender.__modalBackgroundOverlay) {
              var childFrame = document.createElement("iframe");
              childFrame.src = "javascript:'<html></html>';";
     = "absolute";
     = 0;
     = 0;
     = "none";
              childFrame.scrolling = "no";
              childFrame.frameBorder = "0";
              childFrame.tabIndex = "-1";
     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
              var element = sender._modalExtender._backgroundElement;
              element.parentNode.insertBefore(childFrame, element);
              sender.__modalBackgroundOverlay = childFrame;
 = "";
          var viewPortSize = $telerik.getClientBounds();
 = viewPortSize.width + "px";
 = viewPortSize.height + "px";
 = sender.get_popupElement().style.zIndex - 3;
      function hideModalBackgroundOverlay(sender, args) {
          if (sender.__modalBackgroundOverlay)
     = "none";
      You may also have to add a background to the iframe, as transparent frames may not yield the needed result. For example: = "#fff";
    • OR, consider creating similar overlay frames for all special objects on your page and showing/hiding them when needed.

    Thus, to answer the direct question - there is no way to fix that in our code as it will cause a lot of other problems, but I do hope the information and samples I have provided will let you create a workaround for your case. 


    Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top