無法通過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調用引導程序模式

回答

相關問題