How to generate a popup from a button?

[francisco safe]

Hello team,
I need to be able to open, from a button that I already believe, a pop-up with a questionnaire, also created.
I leave you my atlassian-plugin.xml

<? xml version = "1.0" encoding = "UTF-8"?>

<atlassian-plugin key = "$ {atlassian.plugin.key}" name = "$ {project.name}" plugins-version = "2">
  <plugin-info>
    <description> $ {project.description} </description>
    <version> $ {project.version} </version>
    <vendor name = "$ {project.organization.name}" url = "$ {project.organization.url}" />
    <param name = "plugin-icon"> images / pluginIcon.png </param>
    <param name = "plugin-logo"> images / pluginLogo.png </param>
  </plugin-info>
  <! - add our i18n resource ->
  <resource type = "i18n" name = "i18n" location = "Assessment-security" />
  <! - add our web resources ->
  <web-resource key = "Assessment-security-resources" name = "Assessment-security Web Resources">
    <dependency> com.atlassian.auiplugin: ajs </dependency>
    <resource type = "download" name = "Assessment-security.css" location = "/ css / Assessment-security.css" />
    <resource type = "download" name = "Assessment-security.js" location = "/ js / Assessment-security.js" />
    <resource type = "download" name = "images /" location = "/ images" />
    <context> atl.general </context>
  </web-resource>
  <web-resource key = "com.atlassian.auiplugin: aui-dialog2">
    <dependency> com.atlassian.auiplugin: ajs </dependency>
    <resource type = "download" name = "Assessment-security.css" location = "/css/Assessment-seguridad.css" />
    <resource type = "download" name = "Assessment-security.js" location = "/ js / Assessment-security.js" />
    <resource type = "download" name = "images /" location = "/ images" />
    <context> atl.general </context>
  </web-resource>
  <project-tabpanel key = "button-assessment" name = "Button Assessment" i18n-name-key = "button-assessment.name" class = "com.jiradev.jira.plugins.panels.project.BotonAssessment">
    <description key = "button-assessment.description"> The Button Assessment Plugin </description>
    <label key = "button-assessment.label" />
    <order> 10 </order>
    <resource type = "velocity" name = "view" location = "/ css / Assessment-security.css" />
  </project-tabpanel>
  <issue-tabpanel key = "button-assessment-issue" name = "Button Assessment Issue" i18n-name-key = "button-assessment-issue.name" class = "com.jiradev.jira.plugins.panels.issue. ButtonAssessmentIssue ">
    <description key = "button-assessment-issue.description"> The Boton Assessment Issue Plugin </description>
    <label key = "button-assessment-issue.label"> </label>
    <order> 10 </order>
    <resource type = "velocity" name = "view" location = "button-assessment.vm" />
  </issue-tabpanel>
</atlassian-plugin>

the code of the Assessment-security.css button
<button id = "dialog-show-button" class = "aui-button" data-configure-url = "/ js / Assessment-security.js" href = "#"> Assessment-Security </button>

<section id = "demo-dialog" class = "aui-dialog2 aui-dialog2-small aui-layer" role = "dialog" aria-hidden = "true">
    <header class = "aui-dialog2-header">
        <h2 class = "aui-dialog2-header-main"> Captain ... </h2>
        <button class = "aui-dialog2-header-close" aria-label = "close">
            <span class = "aui-icon aui-icon-small aui-iconfont-close-dialog"> </span>
        </button>
    </header>
    <div class = "aui-dialog2-content">
        <p> We've detected debris of some sort in a loose orbit. </p>
        <p> I suggest we beam a section aboard for analysis ... </p>
    </div>
    <footer class = "aui-dialog2-footer">
        <div class = "aui-dialog2-footer-actions">
            <button id = "dialog-submit-button" class = "aui-button aui-button-primary"> Make it so </button>
        </div>
    </footer>
</section>

and the javascript code
AJS. $ ("# Dialog-show-button"). On ('click', function (e) {
    e.preventDefault ();
    AJS.dialog2 ("# demo-dialog"). Show ();
});

// Hides the dialog
AJS. $ ("# Dialog-submit-button"). On ('click', function (e) {
    e.preventDefault ();
    AJS.dialog2 ("# demo-dialog"). Hide ();
});

I leave the image of the button that should open the popup

thank you very much team