I'm very new to jQuery, so be gentle.
I'm trying to use the modal dialog control. I need to style it for my app, so I have overridden a few styles. This may be where I have gone astray, but the modal overlay will not seem to show up. The dialog pops up and works great, I just can't seem to get the modal part working to disable the rest of the page.

Code looks like this:

1.  $.noConflict();
    jQuery(document).ready(function($){
    $('#accordion').accordion({ 
    collapsible: true,
    active: 2 
    });
    $('#dialog-modal').dialog({
    height: 'auto',
    width: 1104,
    resizable: false,
    draggable: false,
    autoOpen: false,
    modal: true
    });
    $('#orgChart').click(function(event) {
    $('#dialog-modal').dialog('open');
    });
    });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

HTML seems pretty straight forward:

1. <div class="ui-dialog ui-widget-overlay"></div>
   <div class="ui-dialog">
       <div>
               object to click and open dialog
       </div>
       <div id="dialog-modal" title="Finance Organization">
               dialog box content
       </div>
   </div>
   
   
   
   
   
   
   
   

Finally... and maybe this is the issue, is the CSS I'm using to override

1. .ui-dialog .ui-widget-overlay
   {
       background-color: #000000;
       opacity: 0.5;
       -moz-opacity:0.50;
       filter: alpha(opacity=50);
       width:100%;
       height:100%;
       z-index:1001;
       position:absolute;
   }
   
   .ui-dialog .ui-widget-header
   {
       background:url("../media/images/portalHeader.gif") repeat-x scroll 50% 50%;
       border:1px solid #000000;
       color:#000000;
       font-weight:bold;
       border-collapse:collapse;
   }
   
   .ui-dialog-titlebar-close  
   {
       height:22px;
       padding:2px;
       position:absolute;
       right:0.3em;
   }
   
   .ui-dialog-content {
       border-bottom: 1px solid #000;
       border-left: 1px solid #000;
       border-right: 1px solid #000;
       background-color:#fff;
   }