javascript - 如果我第一次打开模态框，我的第二个模态框的关闭按钮不起作用。但它只有在我打开和关闭我的第三个模式后才有效？
问题描述
我创建了 3 个模式：第一个用于添加记录，第二个用于编辑记录，第三个用于删除记录。现在，如果我先打开删除模式，然后打开编辑模式，那么编辑模式的关闭按钮可以正常工作，但是如果我在打开删除模式之前打开编辑模式，那么它的关闭按钮不起作用。
为什么会这样？
我在下面分享 HTML、CSS 和 JavaScript 代码。请帮我解决这个问题。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<nav>
<img alt="" src="images/Group 20399.svg" id = "customerSymbol">
<img alt="" src="images/logo.svg" id = "companyLogo">
</nav>
<h3>Invoice List</h3>
<div id = "gridContainer">
<div id = "gridPanelHeader">
<button id="addBtn" class="panelBtn"><img class="panelSymbol" src="images/Path 18189.svg">Add</button>
<button id="editBtn" class="panelBtn"><img class="panelSymbol" src="images/Path 18191.svg">Edit</button>
<button id="delBtn" class="panelBtn"><img class='panelSymbol' src="images/Path 18189-1.svg">Delete</button>
<input id="searchBox" type="text" placeholder="Search for Invoice">
<img id="searchSymbol" src="images/search-24px (3).svg">
</div>
<table id = "invoiceTable">
</table>
</div>
<div id="modal_overlay">
<div id="modal_addinv" style="top: 30vh;left: 20vw;height: 509px;width: 1106px;">
<div class="modal_header" style="height: 91px;width: 1106px;">
<h2 class="modal_heading" style="padding-left: 35px;">Add Invoice <button class="closeBtn"style="left: 44.5vw;top: 1vh;"><img src="images/baseline-close-24px.svg"></button></h2>
</div>
<div class="modal_body" style="width: 1106px;height: 225px;">
<table style="padding-left: 20px;;">
<tr>
<td><label class="modal_field_name">Customer Name</label></td>
<td><input class="modal_textbox" type="text"></td>
<td><label class="modal_field_name" style="margin-left: 100px;">Due Date</label></td>
<td colspan="2">
<input class="modal_textbox" type="date">
<img src="images/calendar_today-24px.svg" style="margin-left: -40px;">
</td>
</tr>
<tr>
<td><label class="modal_field_name">Customer No.</label></td>
<td><input class="modal_textbox" type="text"></td>
<td><label class="modal_field_name" style="margin-left: 100px;">Notes</label></td>
<td rowspan="3"><textarea style="margin-left: 10px;"></textarea></td>
</tr>
<tr>
<td><label class="modal_field_name">Invoice No.</label></td>
<td><input class="modal_textbox" type="text"></td>
</tr>
<tr>
<td><label class="modal_field_name">Invoice Amount</label></td>
<td><input class="modal_textbox" type="text"></td>
</tr>
</table>
</div>
<div class="modal_footer" style="top: 180px;">
<button id="modal_clr" style="left: 40vw;">Clear</button>
<button id="modal_add" style="left: 40vw;">Add</button>
</div>
</div>
<div id="modal_editinv" style="top: 30vh; left:37.5vw; width: 543px;height: 511px;">
<div class="modal_header" style="height: 91px; width: 543px;">
<h2 class="modal_heading" style="padding-left: 35px;">Edit Invoice <button class="closeBtn" style="left: 16vw;top: 1vh;"><img src="images/baseline-close-24px.svg"></button></h2>
</div>
<div class="modal_body">
<table>
<tr>
<td><label class="modal_field_name">Invoice Amount</label></td>
<td><input class="modal_textbox" type="text"></td>
</tr>
<tr>
<td><label class="modal_field_name" style="margin-left: 100px;">Notes</label></td>
<td rowspan="3"><textarea style="margin-left: 10px;"></textarea></td>
</tr>
</table>
</div>
<div class="modal_footer" style="top: 130px; height: 85px;width: 543px;">
<button id="modal_clr" style="left: 14vw;">Reset</button>
<button id="modal_add" style="left: 14vw;">Save</button>
</div>
</div>
<div id="modal_deleteinv" style="top: 30vh; left:37.5vw;width: 611px; height: 342px;">
<div class="modal_header" style="height: 91px; width: 611px;">
<h2 class="modal_heading" style="padding-left: 35px;">Delete Record(s)<button class="closeBtn" style="left: 17.5vw;top: 0.5vh;"><img src="images/baseline-close-24px.svg"></button></h2>
</div>
<div class="modal_body" style="width: 342px;">
<p>
You will lose your records after this action. We can't recover them once you delete.<br/><br/>
Are you sure you want to <span>permanently delete</span> them ?
</p>
</div>
<div class="modal_footer" style="top: 100px; height: 20px; width: 611px;">
<button id="modal_clr" style="left: 17vw;">Cancel</button>
<button id="modal_add" style="left: 17vw;">Delete</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS 代码
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body
{
background-color:#58687e;
pointer-events: auto;
}
#companySymbol
{
position:absolute;
top: 22px;
left: 86px;
width: 233px;
height: 52px;
color: #FFFFFF;
}
#companyLogo
{
position:absolute;
top: 2vh;
left: 45vw;
width: 235px;;
height: 50px;
background: transparent 0% 0% no-repeat padding-box;
}
h3
{
position:absolute;
top: 10vh;
left: 3vh;
width: 141px;
height: 31px;
font: normal normal normal 28px/32px Ubuntu;
letter-spacing: 0px;
color: #FFFFFF;
}
#gridContainer
{
position:absolute;
top: 20vh;
left: 2.5vh;
width: 97vw;
height: 70vh;
background: #273D49CC 0% 0% no-repeat padding-box;
border-radius: 10px;
}
#gridPanelHeader
{
position:absolute;
background-color:transparent;
height: 8vh;
width: 97vw;
}
.panelBtn
{
position:relative;
top: 2vh;
left: 55vw;
width: 100px;
height: 45px;
text-align: center;
justify-content: center;
align-items: center;
font: normal normal normal 18px/21px Ubuntu;
background-color: transparent;
color: #FFFFFF;
border: 1px solid #356680;
border-radius: 10px;
margin: 5px;
}
.panelBtn:hover
{
border: 1px solid #14AFF1;
}
.panelBtn .panelSymbol
{
margin-right: 10px;
}
#searchBox
{
position:relative;
top: 2vh;
left: 57vw;
width: 340px;
height: 45px;
text-align: left;
padding-left: 15px;
font: normal normal normal 18px/21px Ubuntu;
letter-spacing: 0px;
color: #97A1A9;
background: #283A46 0% 0% no-repeat padding-box;
border: 1px solid #356680;
border-radius: 10px;
}
#searchBox:hover, #searchBox:focus, #modal_clr:hover, #modal_add
{
outline: none;
border: 1px solid #14AFF1;
}
#searchSymbol
{
position:relative;
top: 2.7vh;
left: 54.9vw;
width: 32px;
height: 32px;
opacity: 1;
}
#searchBox:hover, #searchBox:focus
{
outline: none;
border: 1px solid #14AFF1;
}
#modal_overlay
{
position: fixed;
top: 0vh;
left: 0vw;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
pointer-events: none;
color: #FFFFFF;
display: none;
}
#modal_addinv, #modal_editinv, #modal_deleteinv
{
position: absolute;
background-color:#2A3E4C;
border-radius: 10px;
opacity: 0;
pointer-events: auto;
}
.modal_header
{
position: absolute;
border-bottom: 1px solid #18232b;
text-align: left;
font: normal normal normal 15px/20px Ubuntu;
}
.closeBtn
{
position: relative;
border: none;
background-color:transparent;
}
.modal_body
{
position: relative;
top: 100px;
}
.modal_deleteinv .modal_body
{
position: relative;
width: 611px;
height: fit-content;
}
.modal_footer
{
position: relative;
justify-content: right;
border-top: 1px solid #18232b;
}
.modal_field_name
{
text-align: left;
font: normal normal normal 20px/24px Ubuntu;
letter-spacing: 0.19px;
opacity: 1;
align-self: flex-start;
margin: 10px;
color: #97A1A9;
}
.modal_textbox
{
width: 300px;
height: 45px;
margin: 10px;
}
textarea
{
height: 200px;
width: 300px;
}
.modal_textbox, textarea
{
text-align: left;
padding-left: 15px;
font: normal normal normal 18px/21px Ubuntu;
letter-spacing: 0px;
color: #97A1A9;
background: #283A46 0% 0% no-repeat padding-box;
border: 1px solid #356680;
border-radius: 10px;
opacity: 1;
}
#modal_clr, #modal_add
{
position: relative;
margin: 10px;
top: 1.75vh;
height: 40px;
width: 100px;
text-align: center;
font: normal normal normal 18px/21px Ubuntu;
background-color: transparent;
color: #FFFFFF;
border: 1px solid #356680;
border-radius: 10px;
}
#modal_add
{
background-color: #14AFF1;
}
p
{
padding-left: 15px;
font: normal normal normal 20px/24px Ubuntu;
text-align: left;
justify-content: center;
width: 611px;
}
span
{
color:rgb(255, 60, 25); font-style: italic;
}
JavaScript 代码
const modal_container = document.getElementById('modal_overlay');
const addBtn = document.getElementById('addBtn');
const editBtn = document.getElementById('editBtn');
const delBtn = document.getElementById('delBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
var current_modal = null;
function openAddModal()
{
current_modal = document.getElementById('modal_addinv');
current_modal.style.opacity = '1';
modal_container.style.display = 'block';
modal_container.style.pointerEvents = 'auto';
current_modal.style.pointerEvents = 'auto';
}
function openEditModal()
{
current_modal = document.getElementById('modal_editinv');
console.log("edit modal opened");
current_modal.style.opacity = '1';
modal_container.style.display = 'block';
modal_container.style.pointerEvents = 'auto';
current_modal.style.pointerEvents = 'auto';
}
function openDelModal()
{
current_modal = document.getElementById('modal_deleteinv');
current_modal.style.opacity = '1';
modal_container.style.display = 'block';
modal_container.style.pointerEvents = 'auto';
current_modal.style.pointerEvents = 'auto';
}
function closeModal()
{
modal_container.style.display = 'none';
modal_container.style.pointerEvents = 'none';
current_modal.style.pointerEvents = 'none';
current_modal.style.opacity = '0';
console.log("Close Button Pressed");
}
closeBtn[0].addEventListener('click', closeModal);
closeBtn[2].addEventListener('click', closeModal);
closeBtn[1].addEventListener('click', closeModal);
addBtn.addEventListener('click', openAddModal);
editBtn.addEventListener('click', openEditModal);
delBtn.addEventListener('click', openDelModal);
解决方案
推荐阅读
- mysql - 我如何获得 Saldo 的价值（借方 - 信贷） Laravel-MySQL
- python - 尝试使用 pip 安装可视化
- python-3.x - 使用 zip 进行迭代的空光标
- javascript - javascript中针对某种关系的最佳数据结构
- java - libGDX java PC 游戏：使用哪个 gradlew/OpenJDK 版本
- python - Python 中的 multiprocessing.dummy.Pool 是如何工作的？
- google-sheets - 基于滑动月份的佣金计算（googlesheets）
- php - 如何从 API 获取特定信息到变量中？
- node.js - nestjs 保存每个请求信息而无需两次访问数据库
- ssl - 使用 AIA Fetching 重建证书链？