Hello,
I'm trying to get the UI Dialog box implemented in a couple of the items
that I am currently working on, but am apparently doing something
incorrectly. Here's the relevant code that I'm testing...
<link href="css/core.css" type="text/css" rel="stylesheet" media="all" />
<link href="scripts/jQuery/jquery.ui-1.0/themes/flora/flora.all.css"
type="text/css" rel="stylesheet" media="all" />
<link href="css/main.css" type="text/css" rel="stylesheet" media="all" />
<script src="scripts/jQuery/jquery-1.2.1.pack.js"
type="text/javascript"></script>
<script src="scripts/jQuery/jquery.dimensions.pack.js"
type="text/javascript"></script>
<script src="scripts/jQuery/jquery.ui-1.0/ui.dialog.js"
type="text/javascript"></script>
<script src="scripts/jQuery/jquery.ui-1.0/ui.mouse.js"
type="text/javascript"></script>
<script src="scripts/jQuery/jquery.ui-1.0/ui.resizable.js"
type="text/javascript"></script>
<script src="scripts/jQuery/jquery.ui-1.0/ui.draggable.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open-dialog").click(function() {
$("#popup-box").dialog().show();
return false;
});
});
</script>
<p>
<button id="open-dialog">Add Listing</button>
</p>
<div id="popup-box" class="hide">
<p>
This is da chit!
</p>
</div>
If I place the above code in my actual file, the "box top" and the
background don't show up. You can see this here:
http://i208.photobucket.com/albums/bb81/nascardiac/dialog_bad_2008_01_22.jpg
However, if I take that exact code and move it to its own file, everything
works as expected. And here's a screen cap:
http://i208.photobucket.com/albums/bb81/nascardiac/dialog_good_2008_01_22.jpg
I've tried just about everything I can think of, but nothing I've tried has
any affect at all. I'm hoping that more sets of eyes will help pinpoint
what I'm doing incorrectly.
Thanks in advance,
Matt
