Creating a website-popup in Node-RED Dashboard - svg

Question

I'm creating an Interactive Floor Plan using Node-RED (with Dashboard and "node-red-contrib-ui-svg"
My problem: I want a Website-popup in the Node-RED Dashboard by clicking on an information icon but i don't know how to create the popup. I tryed it with the "http in", "http request", "http response" and function nodes, but it didn't work. Maybe i just don't get the payload right?
By clicking on the SVG, a event is starting and the SVG Node sends a payload to the output.
Later there should be multiple events with different SVGs opening different URL-popups
Does someone know, if it is possible to create a popup in the Node-RED Dashboard and if yes, tell me how i can do it?
Here is a small example flow of what i tried:
[
{
"id": "213370b.a1a7e9",
"type": "tab",
"label": "Floorplan",
"disabled": false,
"info": ""
},
{
"id": "3a8acfc1.2d033",
"type": "debug",
"z": "213370b.a1a7e9",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"x": 570,
"y": 100,
"wires": []
},
{
"id": "3d085e29.713452",
"type": "http in",
"z": "213370b.a1a7e9",
"name": "googl",
"url": "svg",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 90,
"y": 100,
"wires": [
[
"3e9f0610.1b40da"
]
]
},
{
"id": "7e8c6b26.c6b194",
"type": "http response",
"z": "213370b.a1a7e9",
"name": "",
"statusCode": "",
"headers": {},
"x": 570,
"y": 60,
"wires": []
},
{
"id": "e6a43abb.2208c8",
"type": "function",
"z": "213370b.a1a7e9",
"name": "",
"func": "msg.responseUrl=msg.payload;\nmsg.payload=msg.payload\n\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 450,
"y": 80,
"wires": [
[
"7e8c6b26.c6b194",
"3a8acfc1.2d033"
]
]
},
{
"id": "3e9f0610.1b40da",
"type": "http request",
"z": "213370b.a1a7e9",
"name": "",
"method": "GET",
"ret": "txt",
"paytoqs": false,
"url": "nodered.org",
"tls": "",
"persist": false,
"proxy": "",
"authType": "",
"x": 270,
"y": 100,
"wires": [
[
"e6a43abb.2208c8"
]
]
},
{
"id": "2360d5fd.e4dc9a",
"type": "ui_svg_graphics",
"z": "213370b.a1a7e9",
"group": "ff128f4a.e252",
"order": 1,
"width": 0,
"height": 0,
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><defs id=\"svgEditorDefs\"><symbol id=\"2139\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"><rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/><g xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"32\" cy=\"32\" fill=\"#42ade2\" r=\"30\"/><g fill=\"#fff\"><path d=\"m36.51 25h-6.992c-2.633 0-5.145 1.05-5.584 2.333-.436 1.284.447 2.334 1.965 2.334s2.072 2.02 1.23 4.492l-4.889 14.349c-.844 2.471.619 4.492 3.252 4.492h6.992c2.633 0 5.143-1.051 5.582-2.333.436-1.283-.447-2.335-1.963-2.335-1.518 0-2.072-2.02-1.23-4.491l4.889-14.349c.843-2.47-.619-4.492-3.252-4.492\"/><path d=\"m36.29 11c-2.666 0-5.406 2.238-6.121 5-.717 2.761.869 4.999 3.533 4.999 2.668 0 5.408-2.238 6.123-4.999.717-2.763-.867-5-3.535-5\"/></g></g></symbol><polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\"/></defs><use xlink:href=\"#2139\" x=\"4.410\" y=\"4.552\" width=\"19.061\" height=\"19.061\" id=\"svg_i\" transform=\"matrix(1.87014 0 0 1.87014 -2.59955 -2.72311)\"/></svg>",
"clickableShapes": [
{
"targetId": "#svg_i",
"action": "click",
"payload": "http://www.google.com",
"payloadType": "str",
"topic": "#svg_i"
}
],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"outputField": "payload",
"editorUrl": "//drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"name": "",
"x": 120,
"y": 60,
"wires": [
[
"e6a43abb.2208c8"
]
]
},
{
"id": "ff128f4a.e252",
"type": "ui_group",
"z": "",
"name": "SVG",
"tab": "9f9846f6.57ce98",
"order": 1,
"disp": true,
"width": "23",
"collapse": false
},
{
"id": "9f9846f6.57ce98",
"type": "ui_tab",
"z": "",
"name": "Background",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]

Answer 1

If you are still searching a solution, "modal dialog" is what you are looking for. Try this:
https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8