Отображение результатов в диалоговом окне при нажатии кнопки

Question

Итак, у меня есть сайт, на котором я хочу добавить функцию отображения вывода при клике. Пользователь выбирает поставщика и продолжительность, и в настоящее время результаты отображаются под кнопкой «Отправить». Вместо этого я хочу показать результаты в диалоговом окне. Ниже html:

{% 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 %}

Вот изображение того, как выглядит страница:

Я пробовал различные варианты, показанные в других ответы на эту функцию, но не получили никаких результатов. Любая помощь приветствуется. Спасибо.

Answer 1

Создайте модальное всплывающее окно и добавьте к нему свой текущий html. Вы можете привести пример здесь https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal