Bootstrap 模态示例不显示答案

【问题标题】：Boostrap Modal example doesn't showBootstrap 模态示例不显示
【发布时间】：2018-01-03 13:57:42
【问题描述】：

我正在测试 Bootstrap Modal 示例“live demo”，并且我在 bootstrap starter template 中包含了 bootstrap jquery 和 js，以及自定义 javascript：

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

但是从我的文本编辑器运行的模式不像他们网站上的那样显示。我单击按钮，没有任何反应。我尝试使用 Google Chrome Inspector/console，它显示：

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

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

我的代码只是Bootstrap starter 模板和body 中的模态现场演示代码的组合，所以这里不需要贴代码。

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

 <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 提供的示例代码不同。

【问题讨论】：

你忘记加载 jquery.min.js
您也可以提及您的html代码
在 bootstrap.js 之前必须使用 Jquery
谢谢你们。是的，错误是因为自定义js是在加载jquery之前放置的。如果我通过引导将其放在 jquery 的链接下方，则不会显示错误。但是，按钮仍然没有做任何事情。

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案1】：

感谢大家的建议。我找到了答案： bootstrap的示例代码有错误：

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

data-target="" 应该包含模态的 id，在这种情况下是 #myModal 而不是 #exampleModal。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢 G.Hunt。如果我将自定义 js 放在顶部，您的代码会停止错误消息。如果我将自定义 js 放在正文的底部，则不需要，因为 bootstrap starter 已经有指向 jquery 的链接。按钮仍然没有做任何事情。

【解决方案3】：

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

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

【讨论】：

我没有投反对票，但提问者的问题在于$（又名 Jquery），而不是 DOM 加载。
是的，因为 jquery 尚未加载。这就是他收到$ undefined 错误的原因。
Jquery 尚未加载和文档尚未加载是两个不同的东西。
谢谢 Serdar，但您的建议不起作用。另外，我没有对你投反对票。任何建议表示赞赏。