自舉模態例如不顯示

我測試引導莫代爾例如「live demo」我已經包括引導jQuery和JS在bootstrap starter template，也是自定義JavaScript：自舉模態例如不顯示

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
})

而是從模式運行我的文本編輯器不顯示像他們的網站上那樣。我點擊按鈕，沒有任何反應。我使用谷歌Chrome檢查/控制檯嘗試，它表明：

Uncaught ReferenceError: $ is not defined

在行在功能啓動。當我移除自定義js時，它不會顯示錯誤，但仍然不會在Chrome，Edge或Firefox上顯示該模式。

我的代碼只是Bootstrap啓動器模板和它的模態現場演示代碼的組合，所以不需要在這裏發佈代碼。

而且，請注意，我可以使代碼工作（該按鈕的工作原理是在自舉網站所示的例子）通過分配一個ID，按鈕：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">

然後再添加自定義功能：

<script type="text/javascript"> 
    $("#button").click(function() { 
     $('.modal').modal('show'); 
    }); 
</script>

但是，這不同於Bootstrap提供的示例代碼。

來源

2017-07-27 Viet

忘記了加載jquery.min.js –

你可以請提一下你的html代碼 –

你必須在bootstrap.js之前使用jquery – Morteza

-1

這意味着您在文檔準備就緒之前正在運行腳本。試試這個

$(function(){ 
    $('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
    }) 
});

來源

2017-07-27 17:39:00

一秒鐘，爲什麼downvote ??你可以解釋嗎？ –

我沒有downvote，但提問者的問題是'''（又名Jquery），而不是DOM加載。 – Kevin

是的，因爲jquery尚未加載。這就是他得到'$ undefined'錯誤的原因。 –

一般來說，這個錯誤是因爲你試圖使用JQuery而沒有在你的項目中首先引用它。

嘗試添加以下頂端您的網頁：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

來源

2017-07-27 17:50:17

謝謝G.Hunt。如果我將自定義j放在頂部，您的代碼會停止錯誤消息。如果我將自定義js放在body的底部，則不需要它，因爲bootstrap starter已經鏈接到jquery。該按鈕仍然沒有做任何事情。 – Viet

謝謝大家的建議。我已經找到了答案：通過引導的示例代碼有錯誤：

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button>

的data-target=""應包含的模式，其中，在這種情況下是不是#myModal的#exampleModal的ID。

來源

2017-07-27 19:10:14 Viet

自舉模態例如不顯示

回答

相關問題