If you’ve used AddThis social networking sharing in a jQueryUI dialog, you may have encountered its email sharing form not accepting peripheral input. This occurs when your dialog has modal set to true, which means input events are processed only for fields within that section of the DOM. Since AddThis’ email popup markup is appended to <body>, mouse and keyboard events for those DOM nodes are blocked.

What if you want your dialog to be modal but allow a nested modal window from another library? The simple solution is to set modal as false and manually create your overlay <div> that will grey out the rest of the page view to indicate visual focus should be placed on only the dialog.

For example:

Using the .ui-widget-overlay class on your overlay <div> will follow the same theme as automatically generating a modal dialog would. This example also creates and destroys a DOM node for each instance; you may want to instead use a permanent <div> with $('body .ui-widget-overlay').hide() and $('body .ui-widget-overlay').show() calls used on the open/close events.