Question

I am using a jQuery Dialog in a web application that uses Silverlight on several pages. When the dialog appears on pages with a SL window, the dialog is hidden behind the SL. I cannot use windowless mode. Is there any straight-forward way to make this dialog appear in front of SL?

Answer 1

It appears to work fine using an iframe doing similar to what you explained with the floating div.

It might needs tweaking, but hopefully this can help others.

On your page, include an iframe like so:

<div id="popupDiv" style="display: none">
    popup contents...
</div>
<iframe id='popupSupporter-iframe' tabindex='-1' frameborder='0' style='display: block;
    position: absolute; z-index: -1; border: 0px none transparent; opacity: 0; top: auto;
    left: auto; width: auto; height: auto;'></iframe>

And in the script portion where you declare your dialog:

$('#popupDiv').dialog({
    open: function (event, ui) {
        var myDialogIFrame = $('#popupSupporter-iframe');
        var myDialog = $('#popupDiv').dialog("widget");
        myDialogIFrame.css("z-index", "10");
        var left = myDialog.offset().left + 'px';
        var top = myDialog.offset().top + 'px';
        var height = (myDialog.height() + 15) + 'px';
        var width = (myDialog.width() + 15) + 'px';
        $(myDialogIFrame).css("left", left).css("top", top).css("height", height).css("width", width);
    },
    close: function (event, ui) {
        $('#popupSupporter-iframe').css("z-index", "-1");
    }
});