I am working on a website where I want to enhance the user experience by displaying output in a dialogue box upon click. The current setup involves the user selecting a vendor and time duration, with the results appearing below the Submit button. However, I would like to change this to show the results in a pop-up dialog box instead of below the button. Below is the HTML code snippet for reference:

{% extends "base.html" %}
{% load bootstrap4 %}

{% block content %}

<div class="container" style="margin: auto; text-align: center;">
    <br>
    <h1  style="background-color: #ede8e8;border-radius: 10px; opacity: 0.95;" > WELCOME TO YOUR PAGE, ADMIN!</h1>
    <br>
    <div  style="margin: auto; text-align: center;background-color: #ede8e8;border-radius: 10px;opacity: 0.95;"> 
        <h2>Check the boxes below to display records!</h2>
        <form method="POST" action="/profiles/adminKaLogin/">
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample" value="1">
                <label class="custom-control-label" for="defaultInline1">Vendor 1</label>
            </div>

            <!-- Default inline 2-->
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample" value="2">
                <label class="custom-control-label" for="defaultInline2">Vendor 2</label>
            </div>
        <br>  
        <h3> Select time period</h3>

            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="defaultInlines1" name="inlineDefaultRadiosExample1" value="1">
                <label class="custom-control-label" for="defaultInlines1">1 Month</label>
            </div>  
            <!-- Default inline 2-->
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="defaultInlines2" name="inlineDefaultRadiosExample1" value="2">
                <label class="custom-control-label" for="defaultInlines2">2 Months</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="defaultInlines3" name="inlineDefaultRadiosExample1" value="6">
                <label class="custom-control-label" for="defaultInlines3">6 Months</label>
            </div>
            <br>
            <button type="submit" class="btn btn-primary" name="form1">Submit</button>
            {% if model %}
            <table>
                <thead>
                    <tr>
                        <th style = "padding: 20px;">Vendor ID</th>
                        <th style = "padding: 20px;">Employee ID</th>
                        <th style = "padding: 20px;">Debit</th>
                        <th style = "padding: 20px;">Credit</th>
                        <th style = "padding: 20px;">Time of transaction</th>
                    </tr>
                </thead>
                <tbody>
                {% for i in model %}
                    {% for j in i %}
                    <tr>
                        <td style="text-align: center;">{{ j.vendor_id.id }}</td>
                        <td style="text-align: center;">{{ j.emp_id.id }}</td>
                        <td style="text-align: center;">{{ j.debit }}</td>
                        <td style="text-align: center;">{{ j.credit }}</td>
                        <td style="text-align: center;">{{ j.timestamp }}</td>
                    </tr>
                    {% endfor %}
                {% endfor %}
                </tbody>
            </table>
            {% else %}
                <p>There are no active transactions!</p>
            {% endif %}
        </form>

        <br>

    </div>
    <br>
    <div style="margin: auto; text-align: center;background-color: #ede8e8;border-radius: 10px; opacity: 0.95;">
        <h3>Want to update users' balance? Click below!</h3>
        <input type="button" name="answer" class="btn btn-primary" value="Click here!" onclick="showDiv()"/>
        <br>    
        <div id="welcomeDiv"  style="display:none;" class="answer_list" >
            <form method="POST" action="/profiles/adminKaLogin/">
                <input type="" class="form-control" id="amount1" name="amt" aria-describedby="emailHelp" placeholder="Enter amount"style="width: 25%;margin: 0 auto">
                <br>
                <button type="submit" class="btn btn-primary" name="form2">Submit</button>
                <p>
            </form>
        </div>
    </div>

</div>
{% endblock %}

A visual representation of the page's layout can be viewed here.

Despite trying out various solutions found in other resources, I have yet to achieve the desired outcome. Any assistance or guidance on implementing this functionality would be greatly appreciated. Thank you.