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
    Jorge Ribeiro
    0

    Overlay quick question

    Hi

    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

  • Tom Madden 253 posts 455 karma points MVP 4x c-trib
    Feb 13, 2021 @ 10:52
    Tom Madden
    0

    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

    t

Please Sign in or register to post replies

Write your reply to:

Draft