jquery ui modal window: normal radio button or select elements don't respond to click

When I call a jQuery UI dialog and set modal: false, I can click on normal (non-UI) html radio buttons inside the dialog with no pro开发者_运维问答blem.

But when modal: true, then the radio buttons inside the dialog don't respond to click events.

Is there a simple explanation for this behavior?

---

The point of a modal dialog is so that the users focus is drawn to the information you are displaying to them. When modal: true is set, the focus is on the modal form. The rest of the page is effectively disabled until the user has closed the dialog. This is why the click events don't fire. Usually the background behind the dialog is greyed out so make it clear that the area is basically inactive.

By setting modal: false your form options in the background and the modal forms options are all enabled. So if modal: true is set, only radio buttons etc are enabled on the modal dialog.

Here's a few demos which you can click form controls to see when they are disabled. An active radio/checkbox click results in an alert.

Demo: Modal: true

Demo: Modal: false