Home/ Questions/Q 73115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T20:09:03+00:00

The demos for the jquery ui dialog all use the flora theme. I wanted

  • 0

The demos 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.

Here is the js file:

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);

Here is the html that uses the flora theme:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'> <title>sample</title> <script src='jquery-1.2.6.min.js' language='JavaScript'></script> <link rel='stylesheet' href='flora/flora.all.css' type='text/css'> <script src='jquery-ui-personalized-1.5.2.min.js' language='JavaScript'></script> <script src='TopMenu.js' language='JavaScript'></script> </head> <body>  <input type='button' value='click me!' id='my_button'> <div id='SERVICE03_DLG' class='flora'>please enter something<br><br> <label for='something'>somthing:</label>&nbsp;<input name='something' id='something' type='text' maxlength='20' size='24'> </div>  </body> </html>

Here is the html that uses the downloaded themeroller theme:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'> <title>sample</title> <script src='jquery-1.2.6.min.js' language='JavaScript'></script> <link rel='stylesheet' href='jquery-ui-themeroller.css' type='text/css'> <script src='jquery-ui-personalized-1.5.2.min.js' language='JavaScript'></script> <script src='TopMenu.js' language='JavaScript'></script> </head> <body>  <input type='button' value='click me!' id='my_button'> <div id='SERVICE03_DLG' class='ui-dialog'>please enter something<br><br> <label for='something'>somthing:</label>&nbsp;<input name='something' id='something' type='text' maxlength='20' size='24'> </div>  </body> </html>

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

@David: I tried it, and it doesn’t seem to work (neither on FF or IE). I tried inline css:

style='z-index:5000'

and I’ve also tried it referencing an external css file:

#SERVICE03_DLG{z-index:5000;}

But neither of these work. Am I missing something in what you suggested?

Edit:
Solve by brostbeef!
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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I think it is because you have the classes different.
    <div id='SERVICE03_DLG' class='flora'> (flora)
    <div id='SERVICE03_DLG' class='ui-dialog'> (custom)

    Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.

    I’ve done modals before and I’ve never even defined a class in the tag. jQueryUI should take care of that for you.

    Try getting rid of the class attribute or using the ‘ui-dialog’ class.

    • 0