无法通过javascript调用引导模式_Javascript_Modal Dialog_Bootstrap Modal

无法通过javascript调用引导模式

javascript

无法通过javascript调用引导模式,javascript,modal-dialog,bootstrap-modal,Javascript,Modal Dialog,Bootstrap Modal,我不熟悉引导，并试图学习如何通过链接单击事件显示模式窗口。但是它没有显示任何包含以下代码和控制台错误的内容整个逻辑包含在元素中，如下所示。我需要做的是在用户单击导航栏中的登录链接时显示一个模式窗口 <head> <title>Sample Web Site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <lin

我不熟悉引导，并试图学习如何通过链接单击事件显示模式窗口。但是它没有显示任何包含以下代码和控制台错误的内容

整个逻辑包含在

元素中，如下所示。我需要做的是在用户单击导航栏中的登录链接时显示一个模式窗口

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


示例网站
&时代；
登录
接近
登录
$（'logonLink'）。在（'click'，函数（e）上{
$（“#登录框”）.modal({
键盘：错，
背景：静态
});
});
$（'doLogon'）。关于（'click'，函数（e）{
警报（“感谢您登录”）；
$（'#logonBox'）.modal（'hide'）；
});

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

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

我可以使用引导调用模式窗口。但是这种纯JavaScript调用总是失败的

有人知道我做错了什么吗

谢谢

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

链接：

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>


$（'logonLink'）。在（'click'，函数（e）上{
$（“#登录框”）.modal({
键盘：错，
背景：静态
});
});
$（'doLogon'）。关于（'click'，函数（e）{
警报（“感谢您登录”）；
$（'#logonBox'）.modal（'hide'）；
});


登录

只需以这种方式使用“登录链接”。没有脚本。

您的html应该在

标记中。将整个模式代码和脚本代码移动到正文中。但同样的结果。没有显示任何内容。您到底移动了什么？你能在JSFIDLE或codepen上写下你的代码吗？所有的引导代码和脚本代码都在body标签的开头。我认为问题在于scrip和/或Sign-In链接的组合。我试图显示单击事件的警报窗口。它也失败了，我怀疑脚本调用失败了。我不熟悉用于脚本调用的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>

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