<p>The <a href="http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog" rel="nofollow noreferrer">demos</a> for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme. </p>

<p>Here is the js file:</p>

<pre><code>topMenu = {
    init: function(){
        $("#my_button").bind("click", function(){
            $("#SERVICE03_DLG").dialog("open");
            $("#something").focus();
        });

        $("#SERVICE03_DLG").dialog({ 
            autoOpen: false,
            modal: true, 
            resizable: false,
            title: "my title",
            overlay: { 
                opacity: 0.5, 
                background: "black" 
            }, 
            buttons: { 
                "OK": function() { 
                    alert("hi!");
                }, 
                "cancel": function() { 
                    $(this).dialog("close"); 
                } 
            },
            close: function(){
                $("#something").val("");
            }
        });
    }
}

$(document).ready(topMenu.init);
</code></pre>

<p>Here is the html that uses the flora theme:</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;title&gt;sample&lt;/title&gt;
&lt;script src="jquery-1.2.6.min.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="flora/flora.all.css" type="text/css"&gt;
&lt;script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;script src="TopMenu.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input type="button" value="click me!" id="my_button"&gt;
&lt;div id="SERVICE03_DLG" class="flora"&gt;please enter something&lt;br&gt;&lt;br&gt;
&lt;label for="something"&gt;somthing:&lt;/label&gt;&amp;nbsp;&lt;input name="something" id="something" type="text" maxlength="20" size="24"&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is the html that uses the downloaded themeroller theme:</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;title&gt;sample&lt;/title&gt;
&lt;script src="jquery-1.2.6.min.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css"&gt;
&lt;script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;script src="TopMenu.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input type="button" value="click me!" id="my_button"&gt;
&lt;div id="SERVICE03_DLG" class="ui-dialog"&gt;please enter something&lt;br&gt;&lt;br&gt;
&lt;label for="something"&gt;somthing:&lt;/label&gt;&amp;nbsp;&lt;input name="something" id="something" type="text" maxlength="20" size="24"&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>As you can see, only the referenced css file and class names are different.
Anybody have a clue as to what could be wrong?</p>

<p>@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:</p>

<pre class="lang-none prettyprint-override"><code>style="z-index:5000"
</code></pre>

<p>and I've also tried it referencing an external css file:</p>

<pre class="lang-none prettyprint-override"><code>#SERVICE03_DLG{z-index:5000;}
</code></pre>

<p>But neither of these work. Am I missing something in what you suggested?</p>

<p><strong>Edit:</strong><br>
Solve by brostbeef!<br>
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.</p>

[{'answer_id': 45752, 'author': 'David McLaughlin', 'author_id': 3404, 'author_profile': 'https://Stackoverflow.com/users/3404', 'pm_score': 1, 'selected': False, 'text': '<p>After playing with this in Firebug, if you add a z-index attribute greater than 1004 to your default div, id of "SERVICE03_DLG", then it will work. I\'d give it something extremely high, like 5000, just to be sure.</p>\n\n<p>I\'m not sure what it is in the themeroller CSS that causes this. They\'ve probably changed or neglected the position attribute of the target div that it turns into a dialog.</p>\n'}, {'answer_id': 46061, 'author': 'Brock Boland', 'author_id': 2185, 'author_profile': 'https://Stackoverflow.com/users/2185', 'pm_score': 0, 'selected': False, 'text': "<p>Man, this is a good one.  I've tried doing a bunch of things on these two pages.  Have you tried just leaving the CSS out altogether and trying both pages then?  I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not on the other - but, I'm inclined to believe that Firebug doesn't completely remove the CSS from the rendering, and you'll get different results if you actually remove it from the code.</p>\n\n<p>I also found that you can paste text into the text box using the mouse - it just won't accept keyboard input.  There doesn't seem to be any event handler on it that would interfere with this, though.</p>\n"}, {'answer_id': 177894, 'author': 'MDCore', 'author_id': 1896, 'author_profile': 'https://Stackoverflow.com/users/1896', 'pm_score': 1, 'selected': False, 'text': '<p>I tried implementing a themeroller theme with a dialog and tabs and it turns out that <strong>the themeroller CSS doesn\'t work with official jQuery</strong>! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here:\n<a href="http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/" rel="nofollow noreferrer"><a href="http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/" rel="nofollow noreferrer">http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/</a></a></p>\n\n<p>A user\'s comment:</p>\n\n<blockquote>\n  <p>3) the generated theme that I\n  downloaded seems to be incomplete -\n  when I attempt to use it my tabs\n  (which work with the flora theme, code\n  identical to the documentation\n  example) do not get styled as tabs</p>\n  \n  <p>Having run into 3 I thought I was\n  stuck and would have to revert using\n  “flora"… I have since discovered by\n  reading the source code of the “demo”\n  file that if I adjust my html and give\n  the &lt; li> items I’m using for my tabs\n  the “ui-tabs-nav-item” class then it\n  will work.</p>\n  \n  <p>The theme generated by themeroller is\n  thus unfortunately incomplete.  If the\n  tabs stuff is incomplete, it makes me\n  wonder what else is incomplete.  It\n  was rather frustrating.  :(</p>\n</blockquote>\n\n<p>followed by the themeroller developers comment:</p>\n\n<blockquote>\n  <p>3) We’ll take a look at that. You’re right that those classes\n  should be added by the plugin. For now though, it probably\n  wouldn’t hurt much to just add them to your markup so you \n  can use themeroller themes.\n  We’ll check it out, though. I think our selectors could be \n  based off of the parent ui-tabs selector instead, but I think \n  we were trying not to use elements in our  selectors. Consider\n  it on the to-do list</p>\n</blockquote>\n'}, {'answer_id': 231357, 'author': 'brostbeef', 'author_id': 16437, 'author_profile': 'https://Stackoverflow.com/users/16437', 'pm_score': 3, 'selected': True, 'text': '<p>I think it is because you have the classes different.<br/>\n<code>&lt;div id="SERVICE03_DLG" class="flora"&gt;</code>  (flora)<br/>\n<code>&lt;div id="SERVICE03_DLG" class="ui-dialog"&gt;</code> (custom)</p>\n\n<p>Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.</p>\n\n<p>I\'ve done modals before and I\'ve never even defined a class in the tag.  jQueryUI should take care of that for you.</p>\n\n<p>Try getting rid of the class attribute or using the "ui-dialog" class.</p>\n'}]
['https://Stackoverflow.com/questions/45600', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3751/']