refactor(popup_editor): different handling for z-index

This commit is contained in:
Elian Doran 2025-11-11 15:29:24 +02:00
parent 80c77eeb18
commit a13892da66
No known key found for this signature in database

View File

@ -8,6 +8,10 @@ import TypeWidget from "../type_widgets/type_widget.js";
const TPL = /*html*/`\
<div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog">
<style>
/** Reduce the z-index of modals so that ckeditor popups are properly shown on top of it. */
body.popup-editor-open > .modal-backdrop { z-index: 998; }
body.popup-editor-open .popup-editor-dialog { z-index: 999; }
body.desktop .modal.popup-editor-dialog .modal-dialog {
max-width: 75vw;
}
@ -137,11 +141,6 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
}
$dialog.on("shown.bs.modal", async () => {
// Reduce the z-index of modals so that ckeditor popups are properly shown on top of it.
// The backdrop instance is not shared so it's OK to make a one-off modification.
$("body > .modal-backdrop").css("z-index", "998");
$dialog.css("z-index", "999");
await this.handleEventInChildren("activeContextChanged", { noteContext: this.noteContext });
this.setVisibility(true);
await this.handleEventInChildren("focusOnDetail", { ntxId: this.noteContext.ntxId });
@ -162,9 +161,12 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
if (visible) {
$bodyItems.fadeIn();
this.$modalHeader.children().show();
document.body.classList.add("popup-editor-open");
} else {
$bodyItems.hide();
this.$modalHeader.children().hide();
document.body.classList.remove("popup-editor-open");
}
}