Ok, I'm probably missing the obvious here, but I'm having a very
difficult time understanding how to use a jQuery UI dialog with a
simple theme.
First off, I began with the following code:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/ui/ui.core.js"></script>
<script src="js/ui/ui.dialog.js"></script>
<script>
function showDialog(){
$("#example").dialog();
return false;
}
</script>
</head>
<body>
<p>
<a href="" onclick="return showDialog()">Show the Dialog</a>
</p>
<div id="example" class="flora" title="This is my title">I'm in a
dialog!</div>
</body>
</html>
This is a small modification of the code here: http://docs.jquery.com/UI/Dialog
All I changed was switching from the document ready code to showDialog
so I could manually load the dialog. This works, but the dialog is
visible on page load. I would have assumed that would be something the
basic docs would cover. I had to dig a bit and finally found that I
would just hide it with CSS:
<div style="display: none;" id="example" class="flora" title="This is
my title">I'm in a dialog!</div>
Ok, so no big deal, but why didn't the basic demo mention this? I'm
still a bit rough w/ CSS so if I had not found this on some other
demo, I would have been out of luck.
Anyway, at this point it works, but it has no skin at all. I went on
to the dialog theming page (http://docs.jquery.com/UI/Dialog/Theming),
and it showed this example:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all
undefined ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog
title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span
class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;"
class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
So I replaced my div with that code. Right away I see that the dialog
is no longer hidden. Ok, no big deal, I can fix that later I assume.
There is no ID on the div though so I have no way of showing it.
I added id="example" to the top level div:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all
undefined ui-draggable ui-resizable" id="example">
Now when I click on the link to show the dialog, it does pop the
dialog up, but with multiple title bars. Well, one title, but 2 Xs.
Almost like jquery re-wrapped the div. There is a thick white border
around the item.
I'm pretty frustrated. I've looked around at the demos and docs, but I
can't seem to find a very simple _minimal_ example. Any help please?
