我已经使用 html 和 javascript 在弹出窗口中完成了 2 个与网络相关的类和类似元素，但问题是弹出窗口要么根本不显示，要么显示半秒后立即自行关闭。我无法发布整个代码，但这是粗略的代码块(我将脚本放在文件的最底部，在 html 标记之外):
<script type="text/javascript">
var popup = document.getElementById('popup');
var btn = document.getElementById('btn_popup');
var close = document.getElementById('close');
btn.onclick = function(){
popup.style.display = "block";
}
close.onclick = function(){
popup.style.display = "none";
}
</script><html>
<body>
<div id="titleBar">
<h2>Title</h2>
<div>
<form action="page.php" method="get">
<input type="text" name="item"> by
<select name="search">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
</select>
<input type="submit" value="SEARCH">
<button id="btn_popup">Popup Button</button>
</form>
</div>
</div>
<div id="popup">
<div id="popup_content">
<header>
<span id="close">X</span>
<p>Popup Form</p><br>
</header>
<article>
<div>
<form method="POST" action="page.php">
<input type="text" name="n1" placeholder="N1">
<input type="text" name="n2" placeholder="N2">
<input type="text" name="n3" placeholder="N3">
<input type="text" name="n4" placeholder="N4"><br>
<select name="list">
<option value="">Select One</option>
<?php
//code to generate options
?>
</select><br>
<input type="submit" value="Click">
</form>
</div>
</article>
</div>
</div>
</body>
</html>我从其他页面复制了这部分代码，但它们不再适用于此页面，但它们适用于上一页，没有任何问题。我还使用 PHP 在弹出表单中生成下拉列表。在上一页中，弹出窗口正常显示，但在本页中，弹出窗口仅显示半秒钟，然后自行关闭。
有什么办法可以解决这个问题吗？或者至少关于这个问题的任何线索？并且请不要推荐我使用框架(w3 除外，但不是 w3 模态)来解决这个问题。我正在使用最新的 Google Chrome 浏览器查看这些文件，我也尝试过使用 Mozilla，但结果相同。
最佳答案
问题在于:
<form action="page.php" method="get">
单击按钮时会加载 page.php。
原因是按钮标签的默认“类型”是“提交”。
只需添加 type="button":
<button type="button" id="btn_popup">Popup Button</button>
关于javascript - 使用 javascript 的弹出窗口无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40832477/