所以我正在为我的 3D 建模器网站编程 2 个弹出窗口。我想让两个弹出窗口都工作。但其中之一（上传模型）不起作用。出于某种原因，我认为是 JS，而不是 HTML。
我尝试重命名函数和 HTML 代码。好吧，它什么也没做。请帮忙！ （这是我的所有代码
index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gr8brik homepage</title>
<style type="text/css">
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 90vh;
background-color: white;
z-index: 1;
}
#popup-iframe {
width: 100%;
height: 100%;
}
#popup-iframe2 {
width: 100%;
height: 100%;
}
button {
color: #0000ff;
border: none;
}
button:hover {
color: #add8e6;
}
</style>
<script src="scripts.js"></script>
</head>
<body>
<h1>Welcome to Gr8brik!</h1>
<ol>
<li><a href="/index.php">Home</a></li>
<li><a href="/modeler/index.php">Modeler</a></li>
<li><a href="/account/login.php">Login</a></li>
</ol>
<input id="searchbar" onkeyup="search_models()" type="text" name="models" placeholder="Search models">
<ol id='list'>
<div class="models">
<table>
<tr>
<th>Filename</th>
</tr>
<?php
$files = glob('users/*.xml');
foreach($files as $file){
$xml = new SimpleXMLElement($file, 0, true);
echo '
<tr>
<td>'. basename($file, '.json') .'</td>
</tr>
';
}
?>
</table>
</ol>
</div>
<p>Gr8brik is a 3d Lego builder that's all online. No istallation needed</p>
<div class="button">
<form id="popup-button">
<input type="button" value="Create a model" name="create" />
</form>
<form id="popup-button">
<input type="button" value="Upload a model" name="upload" />
</form>
</div>
<video id="tutorial" controls width="640" height="480" poster="" >
<source src="tutorial.mp4" type='video/mp4;' />
<embed src="tutorial.mp4" wmode="opaque">
<param name="wmode" value="opaque" />
</video>
<div id="overlay"></div>
<div id="popup">
<iframe src="modeler/modeler.htm" id="popup-iframe"></iframe>
<div id="overlay"></div>
<div id="popup">
<iframe src="account/upload.php" id="popup-iframe2"></iframe>
<script>
const form = document.getElementById("popup-button");
const overlay = document.getElementById("overlay");
const popup = document.getElementById("popup");
form.addEventListener("click", function () {
overlay.style.display = "block";
popup.style.display = "block";
});
overlay.addEventListener("click", function () {
overlay.style.display = "none";
popup.style.display = "none";
});
</script>
</body>
</html>
您有两次
<form id="popup-button">id 全局属性定义了一个标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式设置（使用 CSS）时识别元素。
这意味着您的
const form = document.getElementById("popup-button");EventListener您可以添加一个类：
<form class="popup-button">
那么你的 JS 将会是：
const forms = document.querySelectorAll(".popup-button");
forms.forEach((form) => {
form.addEventListener('click', () => {
overlay.style.display = "block";
popup.style.display = "block";
});
});
这将解决您眼前的问题，但这不是您使用 <form>
标签的方式。我建议您将 JavaScript 绑定到
<button>元素。您的代码需要大量修改，但请继续尝试。使用this 教程来帮助您处理模态。