引导模式窗口未显示答案

【问题标题】：Bootstrap modal window not showing引导模式窗口未显示
【发布时间】：2016-04-25 17:14:03
【问题描述】：

我今天尝试在 Bootstrap 上使用模态窗口，但我遇到了问题。模态不会显示。我完全按照getbootstrap.com/javascript/#modals 中的说明做了，但它仍然无法正常工作。有人知道问题吗？这是我的代码。

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

如果删除 <script> 部分会发生什么？该特定脚本将失败，因为 #myModal 尚不存在。最好将您当前的 javascript 包装在 $(function() { ... stuff on load goes here }) jQuery DOM-ready 构造中。
Bootstrap 和你的脚本需要 jQuery 而你没有加载
你能解释一下如何加载它吗？我是新来的。 xD
转到 developers.google.com/speed/libraries/#jquery 并将 1.x sn-p 脚本放在代码的和之间。
是的，Cory，什么也没发生。我写的那个

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

好的，您需要做的就是将 jquery 添加到您的 javascript 库中，如下所示，工作代码只需复制并粘贴整个内容即可。在您的文档的头部有一个脚本标签，其中包含一个指向引导 js 文件的链接，在它上方是一个指向 jquerys js 文件的链接。 Bootstrap 运行 jquery，所以没有它就无法工作。使用 bootstrap，您总是需要在 bootstrap js 文件之前加载 jquerys js 文件

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我认为，你有两个问题：

第一个，正如@Cory 所说，我认为您应该将自定义 javascript 放在页面底部
第二个，你没有包含jquery（别忘了在bootstrap之前插入）

我在这里做了一个小提琴，我将您的 <input id="myInput" /> 添加到您的模态中，它似乎工作得很好：https://jsfiddle.net/9hxo6x88/

希望对你有帮助

【讨论】：

我也这样做了，但仍然 :(。那么这就是我的问题。我使用 XAMPP 是否重要，因为我在 PHP 中做这个项目，我将它托管在本地主机？
嗨@HarisBegic，不，我不认为这是你的问题，它是XAMPP。您是否尝试移动脚本并添加 jquery ？当您打开浏览器控制台时，您是否有 javascript 错误？如果是，那是什么？并完成您包含的 jquery 版本？