Question

我已经使用html和javascript在弹出窗口中浏览了两个类似于Web的相关项目，但问题是弹出窗口要么根本不显示，要么显示半秒并立即关闭。我无法发布整个代码，但这里是粗略的代码块（我把脚本放在文件的最底部，在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模态）来解决这个问题。我正在使用最新的谷歌浏览器查看这些文件，已经尝试过使用Mozilla，但结果相同。

Answer 1

问题在于：

<form action="page.php" method="get">

单击按钮时，

会导致page.php加载。

原因是默认的＆＃34;类型＆＃34;按钮标签是＆＃34;提交＆＃34;。

只需添加type =＆＃34;按钮＆＃34;：

<button type="button" id="btn_popup">Popup Button</button>

Answer 2

但问题是弹出窗口要么根本不显示，要么显示半秒钟并立即关闭。

这是因为一旦你点击弹出按钮，表单就会被提交。

将弹出按钮保留在表单之外，否则您必须处理阻止事件。

<form>
  //your code
</form>
<button id="btn_popup">Popup Button</button>

我创造了一个小提琴，请检查一次

https://jsfiddle.net/ponrajpaul/42g9bk3c/

弹出窗口使用javascript无法正常显示

2 个答案: