这里和网上已经有几篇相关的帖子，但我不太擅长 javascript（而且我很确定，它最终会出现在 JS 解决方案中），并且还没有通过阅读它们找到解决方案。 .
我想要的是让用户选择在数据库应用程序中获取显示的查询结果或将它们直接导出到他们的下载目录。
这按预期工作，但如果用户选择选项来下载结果，我想显示一个模态引导模态以及一些进一步的信息。
我的按钮 html 代码是：
<button class="btn btn-sm"
type="submit"
name="custom_query"
id="custom_query_button"
value="{{ custom_query }}"
>
make query
<span class="form-check form-switch float-end">
<label class="form-check-label" for="export_toggle2"
title="Abfrageergebnisse in Excel-Datei exportieren">
</label>
<input class="form-check-input pe-2" type="checkbox" id="export_toggle2"
name="export"
value="custom_query"
style="cursor: pointer">
</span>
</button>我的 Bootstrap-modal 代码是：
<div class="modal fade" id="QueryModal" tabindex="-1" role="dialog" aria-labelledby="QueryModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="QueryModalLabel">Done!</h5>
</div>
<div class="modal-body">
.....
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>所以如果我把
数据切换=“模式”数据目标=“#QueryModal”
无论这段代码中的哪个位置，我总是在按下按钮时得到模态，甚至更糟糕的是我总是切换开关...
目标是，仅当使用处于“选中”位置的切换开关按下按钮时，模式才会显示...
我想这就是您正在寻找的：
// Show modal when the download button is clicked, based on checkbox state
document.getElementById("downloadResults").addEventListener("click", function() {
var openModalCheckbox = document.getElementById("openModalCheckbox");
if (openModalCheckbox.checked) {
$('#infoModal').modal('show');
}
});<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Query Results</h2>
<!-- Option buttons -->
<button class="btn btn-primary" id="viewResults">View Results</button>
<button class="btn btn-success" id="downloadResults">
Download Results
<label class="mb-0 ml-2">
<input type="checkbox" id="openModalCheckbox"> Open Modal
</label>
</button>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoModalLabel">Additional Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Additional information content here -->
This is some additional information about the download process.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Include Bootstrap JS and your custom JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>