对查询出的task列表记录并对每一条进行rerum添加模态窗口html
时间: 2024-01-06 19:04:59 浏览: 27
好的,您想要我提供一个示例的HTML代码来展示如何为查询出的task列表记录添加rerun模态窗口吗?以下是一个简单的示例代码:
```
<!-- 这里是task列表的HTML代码 -->
<ul id="task-list">
<li class="task-item">
<span class="task-name">任务1</span>
<button class="rerun-btn">重新运行</button>
</li>
<li class="task-item">
<span class="task-name">任务2</span>
<button class="rerun-btn">重新运行</button>
</li>
<li class="task-item">
<span class="task-name">任务3</span>
<button class="rerun-btn">重新运行</button>
</li>
</ul>
<!-- 这里是rerun模态窗口的HTML代码 -->
<div id="rerun-modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>重新运行任务?</h2>
<p>您确定要重新运行此任务吗?</p>
<button id="rerun-confirm-btn">确认</button>
<button id="rerun-cancel-btn">取消</button>
</div>
</div>
<!-- 这里是JavaScript代码,用于显示和隐藏模态窗口 -->
<script>
var rerunModal = document.getElementById("rerun-modal");
var rerunBtns = document.getElementsByClassName("rerun-btn");
var rerunConfirmBtn = document.getElementById("rerun-confirm-btn");
var rerunCancelBtn = document.getElementById("rerun-cancel-btn");
var closeBtns = document.getElementsByClassName("close");
// 点击rerun按钮时显示模态窗口
for (var i = 0; i < rerunBtns.length; i++) {
rerunBtns[i].onclick = function() {
rerunModal.style.display = "block";
}
}
// 点击确认按钮时重新运行任务,并关闭模态窗口
rerunConfirmBtn.onclick = function() {
// 在此添加重新运行任务的代码
rerunModal.style.display = "none";
}
// 点击取消按钮或关闭按钮时关闭模态窗口
rerunCancelBtn.onclick = function() {
rerunModal.style.display = "none";
}
for (var i = 0; i < closeBtns.length; i++) {
closeBtns[i].onclick = function() {
rerunModal.style.display = "none";
}
}
// 当用户点击模态窗口外部时关闭模态窗口
window.onclick = function(event) {
if (event.target == rerunModal) {
rerunModal.style.display = "none";
}
}
</script>
```
您可以根据您的实际需求对代码进行更改和调整。希望这能帮助到您!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)