Blank (empty) page behind modal RadWindow in IE

2 posts, 0 answers
  1. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 05 Sep 2013 Link to this post

    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
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 06 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top