javascript - Bootstrap 模式不显示登录窗口

Question

如何使用 Bootstrap 显示登录模式，其中包含需要完成的操作，但仍然不显示。

enter code here

如何使此模式显示给定以下代码:

Bootstrap 链接:

<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>

模态样式:

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

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

包含链接的导航栏，以显示登录模式:

<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>

登录模式的容器:

<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 代码:

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

Answer 1

您的 Javascript 正在尝试寻址不存在的元素，因为它们没有 id 或错误的 id。

试试这个。

向应该打开模式的链接添加一个 ID。

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

这不是必需的，但我建议更改模态的 ID 以使其更具描述性。

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

现在调整您的 JavaScript 以处理正确的元素。

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