').css("text-align","left").html(options.content).appendTo(dialogBody);
+
+ const stepToolbar = $('
',{class:"red-ui-dialog-toolbar"}).appendTo(dialogContent);
+
+ if (options.buttons) {
+ options.buttons.forEach(button => {
+ const btn = $('
').text(button.text).appendTo(stepToolbar);
+ if (button.class) {
+ btn.addClass(button.class);
+ }
+ if (button.click) {
+ btn.on('click', function(evt) {
+ evt.preventDefault();
+ button.click();
+ })
+ }
+
+ })
+ }
+
+ const width = 500;
+ const maxWidth = Math.min($(window).width()-10,Math.max(width || 0, 300));
+
+ let shade = $('
').appendTo(document.body);
+ shade.fadeIn()
+
+ let popover = RED.popover.create({
+ target: $(".red-ui-editor"),
+ width: width || "auto",
+ maxWidth: maxWidth+"px",
+ direction: "inset",
+ class: "red-ui-dialog",
+ trigger: "manual",
+ content: dialogContent
+ }).open()
+
+ function close() {
+ if (shade) {
+ shade.fadeOut(() => {
+ shade.remove()
+ shade = null
+ })
+ }
+ if (popover) {
+ popover.close()
+ popover = null
+ }
+ }
+
+ return {
+ close
+ }
}
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 3df2b495b..027e783a3 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -205,3 +205,39 @@
background: var(--red-ui-secondary-background);
z-index: 2000;
}
+
+
+.red-ui-popover.red-ui-dialog {
+ z-index: 2003;
+ --red-ui-popover-background: var(--red-ui-secondary-background);
+ --red-ui-popover-border: var(--red-ui-tourGuide-border);
+ --red-ui-popover-color: var(--red-ui-primary-text-color);
+
+ .red-ui-popover-content {
+ h2 {
+ text-align: center;
+ margin-top: 0px;
+ line-height: 1.2em;
+ color: var(--red-ui-tourGuide-heading-color);
+ i.fa {
+ font-size: 1.5em
+ }
+ }
+ }
+
+}
+
+.red-ui-dialog-toolbar {
+ min-height: 36px;
+ position: relative;
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+.red-ui-dialog-body {
+ padding: 20px 40px 10px;
+ a {
+ color: var(--red-ui-text-color-link) !important;
+ text-decoration: none;
+ }
+}