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

Blank (empty) page behind modal RadWindow in IE

1 Answer 28 Views
Window
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 05 Sep 2013, 09:05 PM
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

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 06 Sep 2013, 12:34 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Window
Asked by
jlj30
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Share this question
or