如何根据单击哪个按钮在页面上显示模式
为稍长的代码道歉。我试图在页面上打开模式，但没有任何反应，我的想法已经用完了。
基本上，如果用户选择“访问课程”按钮，则带有 divid01的模式应该以其形式出现。如果点击“重置访问代码”按钮，它将只显示与 相关的模态id02。
我不确定我在这里做错了什么。我知道在注释掉的代码中，如果我取消注释并删除modalFuntion()，那么如果我点击“重置访问代码”按钮，什么也不会发生，如果我点击“访问课程”按钮，两种模式都会出现。
代码：
<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>
幕布斯60546541回答
-
三国纷争
两个模态内容的结束标签都被反转了。他们都先关闭 theform然后关闭div，但它应该是相反的，而且还有一个</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> </div> </form></div>同样的事情也适用于id="id02"模态。
随时随地看视频慕课网APP
相关分类
JavaScript