In my app I have post render JS to remove the overlay mask, allow pointer events and make the dialog draggable using InteractJS.
So I basiclly have a Multi Documenent Interface with two dialogs open.
The problem is that when I close the first dialog, the most recent (second) dialog closes, I want the close button to close the dialog it's apart of and not close the topmost or most recent dialog.
I managed to come up with a work-arround to do this using JavaScript:
I have two dialogs, the Animation (topmost) and Style, I check if both open and hide the later:
let stylePanel = $("#action-style-panel");
let animationEditor = $("#animation-editor");
if ((stylePanel && stylePanel.length > 0) &&
(animationEditor && animationEditor.length > 0)) {
let styleDialog = stylePanel.closest(".ui-dialog");
let close = styleDialog.find(".pi.pi-times");
close.on("click", (e) => {
styleDialog.hide();
e.stopImmediatePropagation();
})
}
Then before I use DialogService to open the style dialog, each time I check if it is hidden:
export var isStyleHidden = () => {
let stylePanel = $("#action-style-panel");
let dialog = stylePanel.closest(".ui-dialog");
if (dialog.css("display") == "none") {
dialog.show();
return true;
} else {
return false;
}
}
I would recomend you to look into MDI support for your dialogs, it would be a unique feature and make you stand out from your competitors.
Just to also mention that O am using Golden Layout which is kind of a MDI thing and works well with Blazor.