overlay quick question

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Jorge Ribeiro 29 posts 213 karma points

Feb 12, 2021 @ 20:39

Using Umbraco And Getting Started

Umbraco 8

I'm trying to get an overlay view on the right side of my backoffice.

Here's my js controller

vm.openOverlay = function () {
            $scope.overlay = {
                view: "/path/to/view.html",
                title: "My title",
                editModel: "",
                show: true,
                submitButtonLabel: "Select",
                closeButtonLabel: "Cancel",
                submit: function (model) {

                    // do submit magic here

                    $scope.overlay.show = false;
                    $scope.overlay = null;
                },
                close: function (oldModel) {

                    // do close magic here

                    $scope.overlay.show = false;
                    $scope.overlay = null;
                }
            };
        };

And here's my view

<umb-overlay ng-if="overlay.show"
             model="overlay"
             view="overlay.view"
             position="right">
</umb-overlay>

The problem is that the overlay is not showing as modal and the user can even change fields in view behind. How can I get that grey translucid screen that umbraco uses when overlays are shown?

Best regards,

Jorge

Copy Link

Tom Madden 252 posts 454 karma points MVP 4x c-trib

Feb 13, 2021 @ 10:52

Not sure if this will help as I've not tested it, but the overlay in the UI Example package prevents clicking on the background and this is how they open the overlay:

  function openOverlay() {

        localizationService.localizeMany(["buttons_overlayTitle", "buttons_overlayMessage"])
            .then(function (values) {

                var overlay = {
                    title: values[0],
                    content: values[1],
                    disableBackdropClick: true,
                    disableEscKey: true,
                    submit: function () {
                        overlayService.close();
                    }
                };

                overlayService.confirmDelete(overlay);
            });
    }

This is the package https://our.umbraco.com/packages/developer-tools/ui-examples/ and the example above is from the buttons.controller.js file

HTH

Copy Link

is working on a reply...

Please Sign in or register to post replies