How to put jQuery UI dialog on top of everything

Question

I have not been able to find a direct and CURRENT answer to this. I am actually surprised that it even is an issue.

We have a dropdown and an iframe OR an object (iframe and pdf fails in firefox, object and pdf does not like redirects in IE) on our site and are trying to put up a captcha. The captcha hides behind the dropdown and the iframe/object. That is so '90s.

My question is: Is there currently a built-in fix in jQuery UI or plans to put it there?

I have found the more than a year old

http://west-wind.com/weblog/posts/876332.aspx
$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, })

and a jquery.bgiframe plugin solution from march last year

http://forum.jquery.com/topic/jquery-ui-dialog-iframe-fix

Are they the current ways to solve the problem?

Here is the current code

function openJCaptchaPromptWindow(url) {
    $("#captchaDialog").load(url).dialog({
       text: "Ok",
           click: function() { $(this).dialog("close"); },
           modal : true,
           autoOpen: true,
           closeOnEscape: true ,
           dialogClass: 'captcha',
           show: 'explode',
           hide: 'explode',
           position: 'top',
           width: 460,
           height: 300
    });

    return false;
}

Adding bgiframe : true, is SO ugly!

Thanks

Answer 1

I will answer this myself: Currently not possible since I did not get any useful and authoritative answers. If anyone comes up with a way, please let me know and I will delete my own answer. thanks

Answer 2

Have you tried using jQuery BlockUI plugin or jqModal?