How to load Javascript in modal box

Hello,
I am trying to display a modal dialog box with webitem on the issue view page, I am able to display the modal box but unable to load javascript. please anyone help me on how to load javascript in a modal box.

Your best bet would be to use WRM client side API like this:

WRM.require(wrc!web-resource-context-name);
WRM.require(wr!web-resource-name);

Put this inside a <script> tag in your dialog template

Thank you for your quick response, please go through files, I am able to display all the contents what i am writing in .vm file but, I am not able to some other .js file using id.

Here is my .vm file

<html>
    <head>
           $webResourceManager.requireResourcesForContext("root")
           <title>Print QR Code</title>
      
    </head>
    <body>
 <h2> Sample Modal box </h2>
        <p>Modalbox contents </p>
        <div id="container" />
</body>
</html>

here I added div with an id container. I am maintaining one reactjs file.
root.js

import React from 'react';
import ReactDOM from 'react-dom';

class DialogComponent extends React.Component {
  render() {
    console.log("Page loaded");
    return (
      <p>Display modal dialog</p>
   );
  }
}

document.addEventListener("DOMContentLoaded", function(event) {

 ReactDOM.render(<DialogComponent />, document.getElementById('container'));
});

Here atlassian-plugin.xml

Display Contents Jira issue page /secure/DialogBox.jspa trigger-dialog

and here webpack.config.js file
entry: {
‘root’:‘./src/root.js’,
},

Here the issue is I am not able to reach out to the root.js file.
Here is the document that, I referred
https://developer.atlassian.com/server/jira/platform/displaying-content-in-a-dialog-in-jira/