This is a migrated thread and some comments may be shown as answers.

Modal radwindow over the top of a PDF in IE11

1 Answer 74 Views

Window

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 06 Mar 2015, 01:49 PM

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%>");

    oWnd.show();

    $get("theIframeId").style.display = "none";

    oWnd.add_close(reShowPDF);

}

function reShowPDF(sender, args) {

    $get("theIframeId").style.display = "";

    sender.remove_close(reShowPDF);

}
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>';";

        childFrame.style.position = "absolute";

        childFrame.style.top = 0;

        childFrame.style.left = 0;

        childFrame.style.display = "none";

        childFrame.scrolling = "no";

        childFrame.frameBorder = "0";

        childFrame.tabIndex = "-1";

        childFrame.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";

        var element = sender._modalExtender._backgroundElement;

        element.parentNode.insertBefore(childFrame, element);

        sender.__modalBackgroundOverlay = childFrame;

    }

    sender.__modalBackgroundOverlay.style.display = "";

    var viewPortSize = $telerik.getClientBounds();

    sender.__modalBackgroundOverlay.style.width = viewPortSize.width + "px";

    sender.__modalBackgroundOverlay.style.height = viewPortSize.height + "px";

    sender.__modalBackgroundOverlay.style.zIndex = sender.get_popupElement().style.zIndex - 3;

}

function hideModalBackgroundOverlay(sender, args) {

    if (sender.__modalBackgroundOverlay)

        sender.__modalBackgroundOverlay.style.display = "none";

}

You may also have to add a background to the iframe, as transparent frames may not yield the needed result. For example:

childFrame.style.backgroundColor = "#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.

Regards,

Marin Bratanov
Telerik

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.