如何根据单击的按钮在页面上显示模式答案

【问题标题】：How to display modals on a page based on which button is clicked如何根据单击的按钮在页面上显示模式
【发布时间】：2021-01-28 08:12:27
【问题描述】：

抱歉，代码有点长。我正在尝试在页面上打开模式，但什么也没发生，而且我的想法已经不多了。

基本上，如果用户选择“访问课程”按钮，带有 div id01 的模态应该与它的表单一起出现。如果点击'Reset Access Code'按钮，它只会显示与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">&times;</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">&times;</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;
            }
            
  }
    ?>

【问题讨论】：

标签： javascript php html

【解决方案1】：

两个模态内容的结束标签都是倒置的。

他们都先关闭form，然后关闭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">&times;</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" 模态也是如此。

【讨论】：

你就是我们所说的先生，一个传奇人物。谢谢