draw for the modal dialog in pixie.js

I am looking for a way to show a modal dialog where the user right-click on the image and modal dialog showed up on the image .the modal dialog have following thing inside it:

• 3 editing fields

  a cancel button

  a save button

  a cross for closing the dialog

I was thinking which approach is better for doing this! having a separate angular component or is there easier way to do it inside pixi.js app?

 private drawImage(): void {
PIXI.Loader.shared.reset();
const frame = document.querySelector('#frame');
const url = this.urlInputImage;
this.removeAllChildNodes(frame);
const app = new PIXI.Application({
  backgroundColor: 0xffffff,
});


PIXI.Loader.shared
  .add('layout',url)
  .load(setup);

function setup() {
  const pic = new PIXI.Sprite(PIXI.Loader.shared.resources.layout.texture);
  app.stage.addChild(pic);

  const container = new PIXI.Container();

  container.interactive = true;

  // Shows hand cursor
  container.buttonMode = true;


  app.stage.addChild(container);

  const w = pic.width;
  const h = pic.height;

  app.renderer.view.style.width = w + "px";
  app.renderer.view.style.height = h + "px";

  //this part adjusts the ratio:
  app.renderer.resize(w,h);
  
}