Bootstrap Modal不显示登录窗口

Question

How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.

enter code here

How do I make this modal to display given the code below:

BOOTSTRAP LINKS:

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

MODAL STYLING:

<style>
.modal-header, h4, .close {
    background-color: #5cb85c;
    color: white !important;
    text-align: center;
    font-size: 30px;
}

.modal-footer {
    background-color: #f9f9f9;
}
</style>

Navigation Bar Containing the Link so as to display the Login Modal:

<nav class="navbar navbar-default ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> </a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Departments</a></li>
                    <li><a href="#">Clubs & Sports</a></li>
                    <li><a href="#">Contact US</a></li>
                    <li><a data-toggle="modal" href="#login">Login</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="register.php"><img alt=""   src="images/person2.png">
                            Sign Up</a></li>
                    <li><a href="#"><img alt="" src="images/login2.png">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

Container For the Login Modal:

<div class="container">

        <div class="modal fade" id="login" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header" style="padding: 35px 50px;">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4>
                            <span class="glyphicon glyphicon-lock"></span> Login
                        </h4>
                    </div>
                    <div class="modal-body" style="padding: 40px 50px;">
                        <form role="form">
                            <div class="form-group">
                                <label for="usrname"><span class="glyphicon glyphicon-user"></span>
                                    Username</label> <input type="text" class="form-control"
                                    id="usrname" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
                                    Password</label> <input type="text" class="form-control"
                                    id="psw" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox" value="" checked>Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">
                                <span class="glyphicon glyphicon-off"></span> Login
                            </button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger btn-default pull-left"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span> Cancel
                        </button>
                        <p>
                            Not a member? <a href="#">Sign Up</a>
                        </p>
                        <p>
                            Forgot <a href="#">Password?</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>

Javascript code to enable the Login Modal:

<script>
$(document).ready(function(){
    $("#login").click(function(){
       $("#myModal").modal();
    });
});
</script>

Answer 1

Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.

Try this.

Add an id to the link that is supposed to bring up the modal.

<li><a href="#" id="loginLink"><img alt="" src="images/login2.png">Login</a></li>

This is not required, but I would recommend changing the id of your modal to be more descriptive.

<div class="modal fade" id="loginModal" role="dialog">

Now adjust your JavaScript to address the correct elements.

$(document).ready(function(){
    $("#loginLink").click(function(){
       $("#loginModal").modal();
    });
});