弹出式表单不可见答案

【问题标题】：Pop-up form does not go visible弹出式表单不可见
【发布时间】：2018-08-31 10:08:02
【问题描述】：

最近我想用 Ajax 和 Bootstrap 制作一个弹出式表单。为此，我从教程站点获得了此代码。然后我注意到当我单击第一个登录按钮时我的代码没有弹出任何内容（根据教程它应该以这种方式工作）。我的代码是遗漏了什么还是明显错误？我只是一个初学者。请帮忙。这是我的代码：

index.php

<?php   
 session_start();  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</title>  
           <script src="js/jquery.js"></script>  
           <link rel="stylesheet" href="css/bootstrap.css" />  
           <script src="js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</h3><br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <?php  
                if(isset($_SESSION['username']))  
                {  
                ?>  
                <div align="center">  
                     <h1>Welcome - <?php echo $_SESSION['username']; ?></h1><br />  
                     <a href="#" id="logout">Logout</a>  
                </div>  
                <?php  
                }  
                else  
                {  
                ?>  
                <div align="center">  
                     <button type="button" name="login" id="login" class="btn btn-success" data-toggle="modal" data-target="#loginModal">Login</button>  
                </div>  
                <?php  
                }  
                ?>  
           </div>  
           <br />  
      </body>  
 </html>  
 <div id="loginModal" class="modal fade" role="dialog">  
      <div class="modal-dialog">  
   <!-- Modal content-->  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Login</h4>  
                </div>  
                <div class="modal-body">  
                     <label>Username</label>  
                     <input type="text" name="username" id="username" class="form-control" />  
                     <br />  
                     <label>Password</label>  
                     <input type="password" name="password" id="password" class="form-control" />  
                     <br />  
                     <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 <script>  
 $(document).ready(function(){  
      $('#login_button').click(function(){  
           var username = $('#username').val();  
           var password = $('#password').val();  
           if(username != '' && password != '')  
           {  
                $.ajax({  
                     url:"action.php",  
                     method:"POST",  
                     data: {username:username, password:password},  
                     success:function(data)  
                     {  
                          //alert(data);  
                          if(data == 'No')  
                          {  
                               alert("Wrong Data");  
                          }  
                          else  
                          {  
                               $('#loginModal').hide();  
                               location.reload();  
                          }  
                     }  
                });  
           }  
           else  
           {  
                alert("Both Fields are required");  
           }  
      });  
      $('#logout').click(function(){  
           var action = "logout";  
           $.ajax({  
                url:"action.php",  
                method:"POST",  
                data:{action:action},  
                success:function()  
                {  
                     location.reload();  
                }  
           });  
      });  
 });  
 </script>

action.php

 <?php  
 session_start();  
 $connect = mysqli_connect("localhost", "root", "", "database1");  
 if(isset($_POST["username"]))  
 {  
      $query = "  
      SELECT * FROM admin_login  
      WHERE admin_name = '".$_POST["username"]."'  
      AND admin_password = '".$_POST["password"]."'  
      ";  
      $result = mysqli_query($connect, $query);  
      if(mysqli_num_rows($result) > 0)  
      {  
           $_SESSION['username'] = $_POST['username'];  
           echo 'Yes';  
      }  
      else  
      {  
           echo 'No';  
      }  
 }  
 if(isset($_POST["action"]))  
 {  
      unset($_SESSION["username"]);  
 }  
 ?>

【问题讨论】：

@BilalAhmed 你能告诉我我应该在哪里添加这个吗？
代码很好，我复制并粘贴了该代码并立即显示弹出窗口。您是否收到任何控制台错误（检查元素）？
@DavidPicksley 你是对的。它工作正常，检查您的控制台并在控制台上找到错误
如何检查错误？我正在使用 notepad++ 和 xampp
右键单击浏览器（执行代码的位置）并单击检查（chrome 中的最后一个选项），然后转到控制台选项卡。你也可以谷歌（如何在浏览器中打开控制台）

标签： javascript php twitter-bootstrap popup

【解决方案1】：

您已经实现了所有内容的代码，但没有实现打开模式的代码。将此添加到您的脚本中

$("#login").on('click',function(){
    `$("loginModal").modal('show');`
});

【讨论】：

你能告诉我我应该在哪里添加这个吗？例如写入我的代码片段并发送它

【解决方案2】：

您的代码在 CSS 中运行完全错误，您的弹出窗口将隐藏“.fade:not(.show)”类使用“opacity:0”您将根据您的要求增加“opacity:10”。

在 CSS 下方更改：

.fade:not(.show) {
    opacity: 1;
}

【讨论】：