Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Vyacheslav 8 posts 98 karma points
    Oct 24, 2021 @ 18:04

    How to use overlay in another overlay? Why second overlay is locked but first is active?

    I have a custom data type "Table Editor", each cell contains RTE.
    But when I want to add a link from Link Picker (or open edit source code) in this RTE, overlay with code window is locked.
    Link Picker is locked until I click on it, but after click Link Picker is active, but RTE overlay closes.
    Link Picker is locked
    I explored code for these elements in the Chrome Dev Tools and marked an oddity: Different places. Table overlay is deep inside page node. Link Picker overlay is inside "umb-editors" class that is after page node.

    Function for init RTE in controller.js:

        function _editCell(cell) {
        vm.richTextEditor = {
            view: "/App_Plugins/Our.Umbraco.Tables/backoffice/views/tables.overlay.view.html",
            show: true,
            title: "Edit cell value",
            prop: {
                alias: "value",
                label: "",
                view: "rte",
                config: {
                    editor: {
                        toolbar: [
                        stylesheets: [
                        maxImageSize: 500,
                        mode: "classic"
                value: cell.value
            submit: function (model) {
                cell.value = model.prop.value;
       = false;
                vm.richTextEditor = null;
            close: function (model) {
       = false;
                vm.richTextEditor = null;
            error: function (error) {

    Overlay layout in editor.view.html:

        <umb-overlay ng-if=""

    How can I use overlay in a overlay correctly?
    Why these overlays are in a different places?

Please Sign in or register to post replies

Write your reply to: