无法通过javascript调用引导程序模式

我是Bootstrap的新手，并试图通过链接单击事件来学习如何显示模式窗口。但它不显示任何与下面的代码和控制台错误没有。无法通过javascript调用引导程序模式

整个逻辑包含在<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>

我可以使用引导程序调用模态窗口。但是这种纯粹的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>

来源

2017-05-01 Indika Rajapaksha

您的html应该位于''标记内 – randomguy04

将整个模态代码和脚本代码移到主体中。但结果相同。没有显示。 –

你究竟做了什么？你能把你的代码写在jsFiddle或codepen上吗？ – randomguy04

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

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

来源

2017-08-04 15:23:00

无法通过javascript调用引导程序模式

回答

相关问题