Javascript Boostrap模态示例不'；不显示

我正在测试Bootstrap模式示例“”，在中包括了Bootstrap jquery和js，以及自定义javascript：

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

但是从我的文本编辑器运行的模式并不像他们网站上显示的那样。我点击按钮，什么也没发生。 我尝试过使用Google Chrome Inspector/控制台，结果显示：

未捕获引用错误：$未定义

在函数开始的行。当我删除自定义js时，它不会显示错误，但仍然不会在Chrome、Edge或Firefox上显示模式

我的代码只是bootstrapstarter模板和它的modallivedemo代码在主体中的组合，所以不需要在这里发布代码

另外，请注意，我可以通过为按钮分配一个id使代码工作（按钮的工作方式与boostrap网站上显示的示例类似）：

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

然后在以后添加自定义函数：

$（“#按钮”）。单击（函数（）{
$（'.modal'）.modal（'show'）；
});

---

但是，这与Bootstrap提供的示例代码不同。

这意味着您正在文档准备就绪之前运行脚本。试试这个

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

---

通常，发生此错误是因为您试图使用JQuery而没有首先在项目中引用它

尝试将以下内容添加到页面顶部：

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

---

谢谢大家的建议。我找到了答案： 引导的示例代码有一个错误：

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

启动演示模式

---

data target=“”

应包含模态的id，在本例中，该id为“myModal not”exampleModal

您忘了加载jquery.min.js您还可以提到您的html代码，您必须在bootstrap.js之前使用jquery谢谢大家。是的，错误是因为在加载jquery之前放置了自定义js。如果我通过引导将其放在jquery的链接下面，则不会显示错误。但是，按钮仍然没有做任何事情。我没有投反对票，但是询问者的问题是

$

（又称Jquery），而不是DOM加载。是的，因为Jquery尚未加载。这就是他收到

$undefined

错误的原因。Jquery尚未加载和文档尚未加载是两件不同的事情。谢谢你，塞达尔，但你的建议不起作用。还有，我没有投你反对票。谢谢你的建议，亨特先生。如果我将自定义js放在上面，您的代码将停止错误消息。如果我将自定义js放在正文的底部，那么就不需要了，因为已经有引导启动程序指向jquery的链接。按钮还是没用。

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