Closing all jquery dialog windows in JavaScript

Question

How does one close all jquery ui dialog windows in javascript?

Situation:

The page has multiple things that can be opened using the dialog boxes. I need a way to close all previous windows before opening a new one.

Superdominant

Answer 1

They all have the .ui-dialog-content class, so select by that and close them, like this:

$(".ui-dialog-content").dialog("close");

Tub

Thank you. I don't know how I've missed that. – Superdominant

Any way to do it if there are different classes? – Gerrygerrymander

@Gerrygerrymander - absolutely, just separate them in your selector by a comma, for example $(".class1, .class2") – Tub

This only outputs "jQuery()" for me in the firebug console. – Augmenter

Careful! For dialogs in the HTML that have not yet been initialized, this can result in an error. A working solution is here: https://mcmap.net/q/408042/-how-to-close-all-jquery-ui-dialog-before-open-a-new-dialog – Isobar

Answer 2

Be careful with the above. If you define a close method for your dialog, it will get fired even if the dialog is not open. This was a huge issue in an Angular project where we were manually calling $apply() in our dialog close method. Another event was trying to close all dialogs on the screen and our close method was called even though wasn't open resulting in a digest issue.

Mf