Agence Web Coheractio - jQuery UI expertise - Fermer un widget dialog en cliquant en dehors

jQuery UI dialogs are great widgets to create modal or non-modal popovers or simple drop-downs menus (e.g. a user menu or a login form) :

  • They support ajax content and can be positioned precisely on the page using the Position plugin.
  • They also have an excellent ARIA and generally speaking accessibility support in terms of keyboard navigation and focus management.
  • They can be closed using the auto-generated close button or the Esc key.

However they can't be closed when you click elsewhere on the page that makes it a problem when you have several dialogs on a single page (you'd expect that opening a dialog widget will automatically close the other opened dialogs) or links or elements that keep you on the same page (e.g. form, ajax refresh, ...).

Agence Web Coheractio has thus developed a small plugin (1 ko) enabling that important feature.

Live demo is available here Demo >

The plugin adds 2 optional parameters and allows combining the default jQuery UI dialog behaviour or use our custom "click outside to close" feature. It works with a single dialog or with multiple dialogs on the same page.

Download the plugin on Github  View on Github >