How do I make the jquery dialog work with the them

Question

I am trying out the dialog from jquery UI. All the online demos use flora.css. I can't get the dialog to display correctly with the css file generated by the themeroller application. Am I missing something? Should these things work out of the box?

Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose. All I needed to do was give the dialog div the attribute class="ui-dialog" like this:

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

I'll accept your answer. Thanks for your time.

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.