JQuery Dialog modal option not working

Question

This is the HTML code:

<div id="dialog" title="lala" style="display:none;">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

This is the JavaScript

$bb('#addTopicButton').live('click',function() {

     $bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

       });

Why modal is not working? When it is opened I still can click other links on the page and do things in the background.

Thanks a lot

UPDATE: It seems to be working though. Only the links are active in the background and working. How can I disable everything, including links?

Answer 1

You probably just need to include the jQuery UI CSS to your page.

Google has this on its CDN here:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

The modal option on the dialog creates an overlay under your dialog but over the rest of the content. This overlay needs the jQuery UI CSS to function correctly.