Jquery UI Dialog Weird Behavior in Firefox - Whole screen becomes non-clickable on second overlay

Question

I have two links that show up two modal dialogs. These dialogs are static divs in the html of the page with their own ids.

When I click the first link, the first dialog shows up and behaves correctly. But when I click the second link, the whole screen grays out and everything becomes unclickable, including the second dialog. It happens also the other way around, clicking the second link, and then the first link.

This problems occurs only in Firefox but not in IE.

Any ideas why this is happening in Firefox?

Answer 1

It really sounds weird. The idea of a modal dialog actually IS to gray/block the background while the dialog is shown. So I'm wondering how do you call the second dialog while another modal dialog is opened?

If you call an UI dialog with

modal: true

it should be impossible to interact with your inputs as long as that dialog is open.