Question

我是Bootstrap的新手，并尝试通过链接点击事件学习如何显示模态窗口。但它没有显示以下代码和控制台错误的任何内容。

整个逻辑包含在<head>元素中，如下所示。我需要做的是当用户点击导航栏中的登录链接时显示模态窗口。

<head>
    <title>Sample Web Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="compiled/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="compiled/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="compiled/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <div class="modal fade" id="loginBox" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Sign In</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" id="userName" placeholder="User Name">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="Password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="doLogon">Sign In</button>
                </div>
            </div>
        </div>
    </div>

<!-- ************** THIS IS NOT CALLED WHEN CLICKED ??? **************** -->
    <script type="text/javascript">
        $('#logonLink').on('click', function(e) {
            $('#loginBox').modal({
                keyboard: false,
                backdrop: static
            });
        });

        $('#doLogon').on('click', function(e) {
            alert('Thank you for Signing In');
            $('#logonBox').modal('hide');
        });
    </script>
</head>

以下是登录链接中的代码：

<ul class="nav navbar-nav navbar-right">
    <li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Sign In</a></li>
</ul>

我可以使用Bootstrap调用模态窗口。但是这种纯粹的JavaScript调用总是失败。

有谁知道我做错了什么？

感谢。

更新：我发现下面的代码有问题，这是一个JQuery。我不知道语法是否100％正确。

链接：

<ul class="nav navbar-nav navbar-right">
    <li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Sign In</a></li>
</ul>

JQuery脚本：

<script type="text/javascript">
            $('#logonLink').on('click', function(e) {
                $('#loginBox').modal({
                    keyboard: false,
                    backdrop: static
                });
            });

            $('#doLogon').on('click', function(e) {
                alert('Thank you for Signing In');
                $('#logonBox').modal('hide');
            });
</script>

Answer 1

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginBox">
  Login
</button>

只需使用“登录链接”即可。没有脚本。

无法通过javascript调用bootstrap模式

1 个答案: