Empty See Through Dialog box

Empty See Through Dialog box


Thanks for taking the time to read my question.
I am just learning jquery. I would like to have a dialog box pop up
when the user clicks on a link.
The link is "LogMeIn"
Right now I have the dialog box pop up, but all it has is a white
border. What it really looks like is a picture frame with no picture
in it, as you can see everything behind / through the dialog box.
---------------
| |
| |
| |
--------------
I'm using CSS but it doesn't seem to be having any styling affect on
my <div>
I downloaded the jquery UI and selected EVERYTHING (jquery-ui-
personalized-1.6b.min.js). I've linked that into my html page.
I'm so close, what am I doing wrong???
Here is my code (The parts that matter anyway)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="ZA.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Javascript/jquery-1.2.6.min.js"></
script>
<script type="text/javascript" src="Javascript/jquery-ui-
personalized-1.6b.min.js"></script>
<script type="text/javascript" src="Javascript/LogInDialog.js"></
script>
</head>
...
<span id="LIDlink" class="CSLink">LogMeIn</span>
            <div id="LID">
                <form name='logmeinsupport' action='https://
secure.logmeinrescue.com/Customer/Code.aspx' method='post'>
                 <table>
                 <tr><td>Enter your 6-digit PIN code: </td><td><input
type='text' name='Code' value='' /></td></tr>
                 <tr><td colspan='2'><input type='submit' value='Connect to
technician' /></td></tr>
                 </table>
                 <input type='hidden' name='tracking0' maxlength='64' value='' />
<!-- optional -->
                 <input type='hidden' name='language' maxlength='5' value='' />
<!-- optional -->
                 <input type='hidden' name='hostederrorhandling' value='' /> <!--
optional -->
                </form>
            </div>
CSS:
#LID {
    display: none;
    background-color: #8194CC;
    width: 475px;
    height: 175px;
    border-right: 4px solid #3F48FF;
    padding: 0px;
    margin: 0px;
    /*z-index: 2;
    position: absolute;*/
    top: 20px;
    left: 20px;
}
#LIDlink {
    cursor: pointer;
    display: block;
    width: 110px;
    background-color: green;
LogInDialog.js:
$(document).ready(function(){
    $("#LIDlink").click(function(){
        //alert("Hi");
        $("#LID").dialog({ modal: true, overlay: { opacity: 0.5, background:
"black" } });
        //alert("Bye");
    });
});