HTML 中的弹出窗口是如何工作的以及如何使该弹出窗口工作？
我从网上找到的各种示例中复制并粘贴了大部分代码，但我真的不知道它是如何工作的，所以我在调试它时遇到了麻烦。我希望提交按钮也能触发弹出窗口，这样每当有人提交时，他们都会首先收到警告，但是，我不知道如何做到这一点，因为我不知道弹出窗口实际上是如何工作的。谢谢 ：）
<html>
<head>
<link rel="stylesheet" type="text/css" href="2.css"/>
<script>
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
</script>
</head>
<body>
<form>
<h3>Please insert your position on the Political Compass based upon the image.</h3>
<section id="y">
<label for="y-position">Y Position:</label>
<input id="y-position" type="number" step="1" name="y-position" min="-10" max="10" maxlength="2">
</section>
<section id="x">
<label for="x-position">X Position:</label>
<input id="x-position" type="number" step="1" name="x-position" min="-10" max="10" maxlength="2">
</section>
<section id="image">
<figure>
<img src="path to image">
</figure>
</section>
<div class="popup" id="popup-1">
<div class="overlay" style="position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 1; display: none;"></div>
<div class="content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); background: #fff; width: 450px; height: 220px; z-index: 2; text-align: center; padding: 20px; box-sizing: border-box;">
<div class="close-btn" onclick="togglePopup()" style="cursor: pointer; position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background: #222; color: #fff; font-size: 25px; font-weight: 600; line-height: 30px; text-align: center; border-radius: 50%;">×</div>
<h1>Warning</h1>
<p>You have been warned.</p>
</div>
</div>
<button onclick="togglePopup()" type="submit" value="submit">Submit</button>
</form>
</body>
I copied and pasted most of this code from various examples I found online, but I don't really know how it works, so I'm having trouble debugging it. I want the submit button to also trigger the popup, so that whenever someone submits, they get the warning first, however, I can't see how to do that because I have no clue how the popups actually work. Thank you :)
<html>
<head>
<link rel="stylesheet" type="text/css" href="2.css"/>
<script>
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
</script>
</head>
<body>
<form>
<h3>Please insert your position on the Political Compass based upon the image.</h3>
<section id="y">
<label for="y-position">Y Position:</label>
<input id="y-position" type="number" step="1" name="y-position" min="-10" max="10" maxlength="2">
</section>
<section id="x">
<label for="x-position">X Position:</label>
<input id="x-position" type="number" step="1" name="x-position" min="-10" max="10" maxlength="2">
</section>
<section id="image">
<figure>
<img src="path to image">
</figure>
</section>
<div class="popup" id="popup-1">
<div class="overlay" style="position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 1; display: none;"></div>
<div class="content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); background: #fff; width: 450px; height: 220px; z-index: 2; text-align: center; padding: 20px; box-sizing: border-box;">
<div class="close-btn" onclick="togglePopup()" style="cursor: pointer; position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background: #222; color: #fff; font-size: 25px; font-weight: 600; line-height: 30px; text-align: center; border-radius: 50%;">×</div>
<h1>Warning</h1>
<p>You have been warned.</p>
</div>
</div>
<button onclick="togglePopup()" type="submit" value="submit">Submit</button>
</form>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
它是这样工作的：
https://codepen.io/aalainn/pen/yLPEKNy
我做了什么：
清理了你的代码一点。
将所有内联样式作为类移至样式标签中。
添加了
display: none;到弹出元素的.popup类。添加了具有属性
display: block;的类.active从叠加层的类
.overlay中删除了display: none;-元素。从类
.content的转换属性中删除了scale(0)。在函数
togglePopup()中添加了e.preventDefault();以防止重新加载页面。This is how it works:
https://codepen.io/aalainn/pen/yLPEKNy
What I did:
Cleaned up your code a bit.
Moved all inline-styles into the style-tag as classes.
Added
display: none;to the class.popupof the popup-element.Added class
.activewith propertydisplay: block;Removed
display: none;from class.overlayof the overlay-element.Removed
scale(0)from transform-propert in the class.content.Added
e.preventDefault();to the functiontogglePopup()to prevent reloading the page.