Pop-up dialog window with group of ui-dashboard nodes

[probitie]

Hi. I'm using node-red v3.0.2 and node-red-dashboard module.

I want to show a group of text input dashboard nodes (a list of options) in a pop-up window.
I found a solution (but haven't tested it yet) - use dashboard notification node and iframe with custom window dialog size but is there a more proper way to do this?

[hotNipi]

Modern browsers have dialog(+modal) element which would be best.

dialog = the easiest way to make a popup modal

[knoepsche]

In a ui-template node you could use the Angular.js service $mdDialog. This could be a start:

<script>
    (function(scope){
        var testShowAlert = function ($mdDialog) {
            var alert = $mdDialog.alert({
                title: 'Attention',
                textContent: 'This is an example of how simple dialogs can be!',
                ok: 'Close'
            });
        
            $mdDialog
                .show( alert )
                .finally(function() {
                  alert = undefined;
                });
        }
        
        var testShowDialog = function ($mdDialog) {
            const ctrl = DialogController;
            const parentEl = angular.element(document.body);
            $mdDialog.show({
                parent: parentEl,
                template:
                    '<md-dialog aria-label="List dialog">' +
                    '  <md-dialog-content>'+
                    '    <md-list>'+
                    '      <md-list-item ng-repeat="item in ctrl.items">'+
                    '       <p>Number {{item}}</p>' +
                    '    </md-list-item></md-list>'+
                    '  </md-dialog-content>' +
                    '  <md-dialog-actions>' +
                    '    <md-button ng-click="ctrl.closeDialog()" class="md-primary">' +
                    '      Close Dialog' +
                    '    </md-button>' +
                    '    <md-button ng-click="ctrl.sendMsg()" class="md-primary">' +
                    '       Send Message' +
                    '    </md-button>' +
                    '  </md-dialog-actions>' +
                    '</md-dialog>',
                locals: {
                    items: ctrl.items
                },
                controller: DialogController,
                controllerAs: 'ctrl'
            });
            function DialogController($mdDialog) {
                this.items = [124, 2345, 5678];
                this.closeDialog = function() {
                    $mdDialog.hide();
                }
                this.sendMsg = function() {
                    scope.send({payload:'my message'});
                }
            }
        } 
        
        scope.showAlert = function() {
           var injector = angular.element("#nr-dashboard").injector();
           injector.invoke(testShowAlert,null,null);
        };
        
        scope.showDialog = function($event) {
           var injector = angular.element("#nr-dashboard").injector();
           console.log(injector);
           injector.invoke(testShowDialog,null,null);
        };
    
    })(scope);
</script>
<button ng-click="showAlert()">Test Alert</button>
<button ng-click="showDialog($event)">Test Dialog</button>