CODEWITHSUNDEEP
jquerydialogmodal-dialog
user758072
user758072

Reputation: 23

Jquery Modal Dialog disables dialog in Internet Explorer 8 Compatibility Mode

I didn't see any answered questions about this. Currently I use Jquery UI Dialog boxes with modal set true.

            $("#popup").dialog
        ({
            height: 550,
            width: 750,
            modal: true,
            autoOpen: false,
            position: 'top',
            title: "Popup",
            resizable: false,
            closeOnEscape: false,
            closeText: "",
            open: function(type, data) {
                $(this).parent().appendTo('form:first');
            }
        });
    }

The popup works and correctly fires but while in IE 8 comparability mode it grays out everything including the popup box. It appears the overlay covers everything and makes it impossible to click anything. I hope someone else has hit this and has an idea.

UPDATE

Looks like after making a really dumbed down test page it was a problem with the css coming from a masterpage that I am required to use. The css forces position:relative which seems to be the problem. Since I can't edit the css for the masterpage, I instead put in this code

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

which forces the browser to not use compatibility mode for my page, and it seems to be working.

Thanks for the comments and time!

Upvotes: 2

Views: 6281

Answers (2)

Code Maverick
Code Maverick

Reputation: 20415

I went to jsFiddle and tried your code in FF4.01, Chrome 11, IE8, and IE8 Compatibility mode (IE7) and they all seem to work.

Check out the working jsFiddle demo:

$("#popup").dialog(
{
    height: 550,
    width: 750,
    modal: true,
    autoOpen: true,
    position: 'top',
    title: "Popup",
    resizable: false,
    closeOnEscape: false,
    closeText: "",
    open: function (type, data) { $(this).parent().appendTo('form:first'); }
});

Upvotes: 0

JimmiV
JimmiV

Reputation: 19

I had the same issue and, unfortunately, I also needed the compatibility mode in every page. Finally, I found out this workaround:

open: function(type, data) { 
    $(this).parent().appendTo('form:first'); 
    $('.ui-widget-overlay').appendTo('form:first');
}

Upvotes: 2

Related Questions