JQUeryUI Dialog and HTML select

Question

I have an ASPX page where jQuery UI dialog will appear on the screen ,on clicking on a button,When the UI dialog is active ,User cant interact with any other controls.ITs working good. But I have a Dropdown list (Select ) in the page .It is still active .User is able to go and choose any option from the dropdown. I know that in IE6,Its considering select box as a new element. How can i solve this ? I want to restict users from changing the dropdownlist content when UI Dialog is active

Any thoughts ? Thanks in advance

Edit My Style tage inside the head

<style type="text/css">
    body { font-size: 62.5%; }
 label, input { display:block;
        width: 94px;
    }
 input.text { margin-bottom:12px; width:95%; padding: .4em; }
 fieldset { padding:0; border:0; margin-top:25px; }
 h1 { font-size: 1.2em; margin: .6em 0; }
 div#users-contain {  width: 350px; margin: 20px 0; }
 div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
 div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
 .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
    #dialog{
     display: none;
    }


</style>

and i am using the dialog.open method to show the dialog

 $("#dialog").dialog("open");

Answer 1

Based on the following example:

http://jsbin.com/ibeje

I cannot replicate what's happening. There's something else going on. Are you setting the z-order of the select box yourself?

Answer 2

I am experiencing the same thing currently with IE6. My aspx page has several html selects and they show through the jQuery UI 1.7.1 dialog box that appears over them. I believe this is happening because the dialog is not placing a hidden/zero opacity iFrame under the dialog. I would kinda expect that UI developers would have done this already for us IE6 guys, but there it is.

When I find a convenient fix for this I will post it or if some other kind soul could do so that would be great.

The link altCognito submitted also has this problem in IE6 too.

This page references the iframe fix but it not specifically for UI Dialog: ht tp://stackoverflow.com/questions/7937/solve-the-ie-select-overlap-bug

Sorry Im a new user and new users are not allowed to post working hyperlinks

Addtionally, are you using:

$('.selector').dialog({ modal: true });

To make your dialog modal and block interaction with the parent page?

Answer 3

on the dialog you need to set bgiframe : true and also include the bgiframe plugin

see here