因此,我有一个网站,我想在其中添加单击时显示输出的功能。用户选择供应商和持续时间,当前结果显示在“提交”按钮下方。我想改为在对话框中显示结果。以下是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 %}
我已经尝试过其他答案中显示的关于此功能的各种选项,但没有得到任何结果。感谢您的帮助。谢谢。
答案 0 :(得分:0)
创建一个模式弹出窗口,然后将当前的html添加到其中。您可以在此处引用示例https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal