点击按钮打开模态对话框时出现问题?
问题描述:
所以,我今天已经了解了模态窗口,在过去的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">
\t <div class="BtLogin">
\t \t \t <a href="Login/paginalogin.php">
\t \t \t \t <input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png">
\t \t \t </a>
\t </div>
\t <form action="" id="myform" method="POST">
\t \t <table class="Table">
\t \t \t <tr>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt1" form="myform" value="A"></td>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt2" form="myform" value="B"></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt3" form="myform" value="C"></td>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt4" form="myform" value="D"></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt5" form="myform" value="E"></td>
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt6" form="myform" value="F"></td>
\t \t \t </tr>
\t \t </table>
\t </form>
</body>
</html>
我需要所有6个按钮做同样的事情。通过给他们相同的ID,我认为这会起作用,对吧?但我的问题似乎是放置div的地方。你能帮我吗?我不需要你来修复我的整个代码,只是想知道我做错了什么,以及我应该如何解决它。
答
回到基础。您可以使用:target伪类创建纯CSS模式窗口。 Mozilla有一个基本的例子here,Dynamic Drive有一个more elaborate CSS Modal也使用这种技术。