单击按钮时打开模式对话框的问题？答案

【问题标题】：Issue with opening modal dialog box on button click?单击按钮时打开模式对话框的问题？
【发布时间】：2017-05-08 21:19:10
【问题描述】：

所以，我今天了解了模态窗口，过去 2 个小时左右我一直在阅读它们，但我不太了解它们的实际工作原理。我创建了一个草稿 .html 文件，并按照 w3school 的教程进行操作，它运行良好。我什至编辑了所有的 .css 代码和一些 html，以便将其移植到我的主项目中。

问题是，它不起作用。应该在对话框上的文本只显示在页面的顶部/底部。我究竟做错了什么？我将为您提供我的 html 和 link，我从那里获得了模态框。不需要页眉和页脚，因为这对我来说毫无意义。

我尝试将 div 放置在很多地方，但老实说，我不知道将它们放在哪里或做什么。

这是我的代码，无需我尝试让模态框工作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body class="Background">
	<div class="BtLogin">
			<a href="Login/paginalogin.php">
				<input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png">
			</a>
	</div>
	<form action="" id="myform" method="POST">
		<table class="Table">
			<tr>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt1" form="myform" value="A"></td>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt2" form="myform" value="B"></td>
			</tr>
			<tr>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt3" form="myform" value="C"></td>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt4" form="myform" value="D"></td>
			</tr>
			<tr>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt5" form="myform" value="E"></td>
				<td><input class="Button ButtonTxt" type="submit" name="ContBt6" form="myform" value="F"></td>
			</tr>
		</table>
	</form>
</body>
</html>

我需要所有 6 个按钮来做同样的事情。通过给他们相同的ID，我认为这会起作用，对吧？但我的问题似乎是放置 div 的位置。你能帮我吗？我不需要你修复我的整个代码，我只想知道我做错了什么以及我应该做些什么来修复它。

【问题讨论】：

标签： javascript html modal-dialog

【解决方案1】：

回到基础。您可以使用 :target 伪类创建一个纯 CSS 模式窗口。 Mozilla 有一个here 的基本示例，Dynamic Drive 也有一个使用这种技术的more elaborate CSS Modal。

【讨论】：