[Solved] Blank (empty) page behind modal RadWindow in IE

[jlj30]

Hi,

I am launching a RadWindow using the following Javascript function:

function openRadWindow(url,title,width,height)
            {
                var oWindow = window.radopen(url, null);
                oWindow.set_autoSize(true);
                oWindow.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Resize);
                oWindow.set_modal(true);
                oWindow.set_centerIfModal(true);
                oWindow.set_title(title);
                oWindow.set_visibleStatusbar(false);
                oWindow.add_close(OnClientClose);
                oWindow.set_destroyOnClose(true);  // Added to see if it fixes the entire screen becoming modal upon second launching
                //oWindow.set_height(height);
                //oWindow.set_width(width);
                var popupElem = oWindow.get_popupElement();
                popupElem.style.zIndex = "" + 7001;
            }

In FireFox and Chrome, things work just fine.
However, in IE8 the page on top of which the window pops up is blank.
See the attached screenshots.

Any suggestions?

Thanks in advance.

Jim

[Marin Bratanov]

Hello Jim,

This behavior is rather strange, and it seems like the CSS filter that is applied to the modal background in your IE is completely opaque, instead of being transparent. The page is not actually blank, because I see a menu showing through.

Under FF the opacity property is used, but IE requires a directX filter for this, so here is what we have for the modal background of our popups:

filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)

so you can try overriding it like this:

.TelerikModalOverlay
{
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=10) !important;
    opacity: 0.1 !important;
}

where the value can be changed to match your needs.


It seems to me that the IE browser in question has issues with its filters, so I would also advise repairing it and resetting its settings. You can also check if disabling its add-ons helps.



Another workaround I can suggest is creating a semi-transparent image to use as a background and remove the filters, either with the above CSS, or with the below script:

function OnClientShow(sender, args)
{
    if ($telerik.isIE8)
    {
        var modalExtender = sender._modalExtender;
        if(modalExtender){
            modalExtender._backgroundElement.style.filter = "";
            modalExtender._backgroundElement.style.backgroundColor = "transparent";
            modalExtender._backgroundElement.style.backgroundImage = "url('images/semi-transparent-image.gif')";
        }
    }
}

Regards,
Marin Bratanov
Telerik