JQuery Dialog modal option not working

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.

Just had the same issue. I needed the CSS, but I didn't want all of it. So I just copy pasted this part in my own CSS code:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.3;
}