How do I handle modal dialog fadeout in jQuery UI?

Question

At http://jqueryui.com/demos/dialog/#modal-form, there is a sample modal dialog; when you click on "Create new user", it displays a modal dialog and fades everything but the dialog.

On my work based on that, I've specified "modal: true," and the modal dialog appears and disappears appropriately, but nothing else is greyed out; the rest of the screen looks as it looked before.

Do I need to apply additional CSS or serve up an image? A brief look at the sample source code didn't make it clear what I need to be adding so that it greys out the background.

If I need to have other static content served up, how can I serve it up under a Django /static/ tree? In other words, do I need to make /foo/ and /bar/ additional static content directories, or will it work with subdirectories of /static/?

Answer 1

When you're passing modal:true as one of the options to ui-dialog, there should be an overlay div element created with a high z-index and a classname of ui-widget-overlay assigned to it. If you decided to write your own stylesheets rather than use one of the available ones as a template, it could just be that you need to define the ui-widget-overlay class in your stylesheets, set its opacity etc.

Answer 2

Do you have the appropriate theme files in the correct place on the server? If you aren't using a standard default theme you can create your own using jQuery UI's theme roller.