Javascript 如何根据单击的按钮在页面上显示模态
抱歉代码太长。我试图在页面上打开情态动词，但是什么都没有发生，我的想法也没有了 基本上，如果用户选择“访问课程”按钮，则带有divJavascript 如何根据单击的按钮在页面上显示模态,javascript,php,html,Javascript,Php,Html,抱歉代码太长。我试图在页面上打开情态动词，但是什么都没有发生，我的想法也没有了 基本上，如果用户选择“访问课程”按钮，则带有divid01的模式应与其表单一起出现。如果单击“重置访问代码”按钮，它将仅显示与id02相关的模式 我不确定我在这里做错了什么。我知道在注释掉的代码中，如果我取消注释并删除了modalFunton（），那么发生的事情是，如果我单击“重置访问代码”按钮，什么也不会发生，如果我单击“访问课程”按钮，两个模式都会显示 代码： 软件测试在线课程简介 通路 忘记访问代码 您和m
id01id02相关的模式
我不确定我在这里做错了什么。我知道在注释掉的代码中，如果我取消注释并删除了modalFunton（）
软件测试在线课程简介
通路
忘记访问代码
您和modal的内容的结束标记是反向的
它们都是先关闭表单
，然后关闭div
，但应该是另一种方式，而且还缺少一个
（我改进了识别，以帮助更好地可视化问题）：
先生，你就是我们所说的传奇人物。非常感谢。
<body>
<div style="text-align: center; margin-top: 2em;">
<img src="static/images/logo.png">
<h2>INTRODUCTION TO SOFTWARE TESTING ONLINE COURSE</h2>
<!--<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Access Course</button>-->
<!--<br/><br/>-->
<!--<button class="buttonLink" onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Forget Access Code</button>-->
<button onclick="modalFunction()" style="width:auto;">Access Course</button>
<br/><br/>
<button class="buttonLink" onclick="modalFunction()" style="width:auto;">Forget Access Code</button>
</div>
<div id="id01" class="modal">
<form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="username" required>
<span class="help-block"><?php echo $username_err; ?></span>
<br/><br/>
<label for="password"><b>Access Code</b></label>
<input type="text" placeholder="Enter Access Code" name="password" required>
<span class="help-block"><?php echo $password_err; ?></span>
<button type="submit" value="Login" name="Login">Enter</button>
</form>
</div>
<div id="id02" class="modal">
<form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="reset-email"><b>Enter your email to reset your Access Code</b></label>
<input type="text" placeholder="Enter Email" name="reset username" required>
<span class="help-block"><?php echo $reset_username_err; ?></span>
<button type="submit" value="Reset" name="Reset">Reset</button>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
var modal2 = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}else if (event.target == modal2){
modal2.style.display = "none";
}
}
function modalFunction(){
document.getElementsByName("Login").onclick = function() {
modal.style.display = "block";
modal2.style.display = "none";
}
document.getElementsByName("Reset").onclick = function() {
modal2.style.display = "block";
modal.style.display = "none";
}
}
</script>
<?php if($_SERVER["REQUEST_METHOD"] == "POST"){
switch ($_POST["submit"]) {
case "Login":
echo "<script>document.getElementById('id01').style.display='block';</script>";
break;
case "Reset":
echo "<script>document.getElementById('id02').style.display='block';</script>";
break;
default:
break;
}
}
?>
<div id="id01" class="modal">
<form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="username" required>
<span class="help-block"><?php echo $username_err; ?></span>
<br/><br/>
<label for="password"><b>Access Code</b></label>
<input type="text" placeholder="Enter Access Code" name="password" required>
<span class="help-block"><?php echo $password_err; ?></span>
<button type="submit" value="Login" name="Login">Enter</button>
</div>
</form>
</div>