模态对话框登录系统 - modal dialog login system

我想做的是使一个登录系统使用模式对话框从bootstrap 3显示和隐藏表单使用javascript。用户成功登录后，它将使用javascript代码重定向到Profile form。我的问题是，在我点击登录按钮后，模态对话框消失，什么也没发生。

脚本:

<script type="text/javascript">
$(document).ready(function() {
   $('#myLogin').submit(function() {
        var email = $('#email').val();
        var password = $('#pass').val();    
        $.ajax({
            data: {
             email : email, password : password
            },
            type: "POST",
            url: 'user.php',
            success: function(data)
            {
               $('#show').html(data);
               $(".show-page[data-page=Profile]").trigger("click");
            }
        });
            return false;
    });
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    if(typeof(Storage)!=="undefined" && localStorage.getItem('pageToShow')) {
        var pageToShow = localStorage.getItem('pageToShow');
         $('.page').addClass('hide');
         $('.' + pageToShow).removeClass('hide');
    }
    $('.show-page').click(function(){
        var pageToShow = $(this).data('page');
         $('.page').addClass('hide');
         $('.' + pageToShow).removeClass('hide');
        if(typeof(Storage)!=="undefined") {
            localStorage.setItem('pageToShow', pageToShow);
        }
    $('.modal-btn').click(function() {
        $('.modal').modal('hide');
    });
});  
</script>

index . php

<body>
<form method="post" id="elogForm" action="index.php">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <ul class="nav navbar-nav navbar-left">
                <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a></li>
            </ul>
        </div>
    </div>
</nav>
        <div class="container"  id="myLogin">
            <div class="row">
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>    
                                    <div id="show"></div>                                   
                                </div>
                                <div class="modal-body">
                                    <div class="form-horizontal">       
                                        <div class="form-group">
                                            <label for="email" class="col-sm-2 control-label">Email</label>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                                    <input type="email" id="lemail" name="email" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." required="required" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="password" class="col-sm-2 control-label">Password</label>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                                    <input type="password" id="lpassword" name="password" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." required="required" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
                                                <label>  &nbsp; Keep me logged in</label>  &nbsp; <b>|</b>
                                                <a href="" style="text-decoration:none">  &nbsp; Forgot your password?</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" id="login" name="login" class="btn btn-primary show-page"  data-page="Profile"><span class="glyphicon glyphicon-user"></span> Login</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
<div class="container">
        <div class="page Home">
            <div class="row">
                <center>    
                    <h1>"Home"</h1>
                </center>
             </div>
        </div>
        <div class="page Profile hide">
            <div class="row">
                <center>
                    <h1>"Profile"</h1>
                </center>
            </div>
        </div>
</div>  
</form>
</body>

user.php

<?php
include_once('connection.php');
$db = new Connection();
$db = $db->dbConnect();
$email = $_POST['email'];
$pass = $_POST['password'];
    if(!empty($email) && !empty($pass)){
        $st = $db->prepare("SELECT * from user WHERE email=? AND password=?");
        $st->bindParam(1, $email);
        $st->bindParam(2, $pass);
        $st->execute();
        if($st->rowCount() == 1){
            echo "Email verifies, Access granted";
        } else {
            echo "Incorrect Email or Password";
        }
    }else{
        echo "Please enter Email and Password";
    }  
?>

这在底部工作，您可以阅读问题所在:

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="">
    <title>Modal Login</title>
    <!-- Core CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
        h1 {
            text-align: center; 
        }
    </style>
 </head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <ul class="nav navbar-nav navbar-left">
                <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a></li>
            </ul>
        </div>
    </nav>
    <div class="container" id="myLogin">
        <div class="row">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>    
                            <div id="show"></div>                                   
                        </div>
                        <div class="modal-body">
                            <form method="post" id="elogForm">
                                <div class="form-horizontal">       
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">Email</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                                <input type="email" id="lemail" name="email" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." required="required" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">Password</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                                <input type="password" id="lpassword" name="password" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." required="required" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
                                            <label>  &nbsp; Keep me logged in</label>  &nbsp; <b>|</b>
                                            <a href="" style="text-decoration:none">  &nbsp; Forgot your password?</a>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" id="login" name="login" class="btn btn-primary show-page"  data-page="Profile"><span class="glyphicon glyphicon-user"></span> Login</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div><!--/.modal-body -->
                    </div><!--/.modal-content -->
                </div><!--/.modal-dialog -->
            </div><!--/.modal .fade -->
        </div> <!--/.row -->
    </div> <!--/.container -->
    <div class="container">
        <div class="page Home">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Home</h1>
                </div>
            </div>
        </div>
        <div class="page Profile hide">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Profile</h1>
                </div>
            </div>
        </div>
    </div>  
</body>
<!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="plugins/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
   $('#elogForm').submit(function(event) {
       event.preventDefault();
        var email = $('#lemail').val();
        var password = $('#lpassword').val();    
        $.ajax({
        data: {email : email, password : password},
        type: "POST",
        url: 'user.php',
        success: 
            function(data) {
                $('#show').html(data);
                $(".show-page[data-page=Profile]").trigger("click");
                $('#myModal').modal('hide');
            }
        });
   });
    $('.show-page').click(function(){
        var pageToShow = $(this).data('page');
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
        if(typeof(Storage)!=="undefined") {
            localStorage.setItem('pageToShow', pageToShow);
        }
    });
});
</script>
</body>
</html>

我做了些什么来让它工作呢:

最重要的是，在你的提交函数中，变量正在获取id为email和pass的字段的值。这些都不存在。您的id是lemail和lpassword。
您试图提交一个id不存在的表单。将选择器更改为表单elogForm的id。
添加了event.preventDefault()，这样表单就不会在提交时自动消失，这样你的错误信息就可以显示了(虽然，在你的user.php验证将永远不会运行，因为字段总是有值，因为你正在使用html5输入)。
在显示正确页面后，成功功能增加关闭模式。
删除返回false(我认为这是你试图在preventDefault)。
清理你的html通过包装表单周围的表单元素，而不是整个页面，删除<center>标签，并确保你有一个行内的冷。

所以，这在我的结束工作，但这里的交易:你不能使用它，除非你答应我，你永远不会再使用<center>标签，任何地方，甚至在测试页面;-)

我认为你的问题是你正在触发一个div ($('#myLogin').submit(function())上的提交事件，你应该触发登录按钮上的点击事件，我想

你的button元素是login su use

$('#login').click(function()

提交事件用于表单元素。

参考此文档