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>
<button id="open-dialog">Add Listing</button>
<div id="popup-box" class="hide">
This is da chit!
</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:
<a href="http://i208.photobucket.com/albums/bb81/nascardiac/dialog_bad_2008_01_22.jpg">http://i208.photobucket.com/albums/bb81/nascardiac/dialog_bad_2008_01_22.jpg</a>
However, if I take that exact code and move it to its own file, everything works as expected. And here's a screen cap:
<a href="http://i208.photobucket.com/albums/bb81/nascardiac/dialog_good_2008_01_22.jpg">http://i208.photobucket.com/albums/bb81/nascardiac/dialog_good_2008_01_22.jpg</a>
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