bootstrap 模态不显示检索到的信息

Question

我有一个非常基本的简单模式，由 Bootstrap 提供。我正在尝试完成这项工作，但出于某种原因，它没有 return 存储在数据 ID 中的值，并且一切看起来都与 bootstrap 教程中的完全一样。我认为它甚至没有使用 javascript。我试图将 javascript 放在另一个文件以及同一个 html 文件中。

为什么它不起作用？

Bootstrap 版本（根据触发按钮改变模态内容）：http://getbootstrap.com/javascript/#modals

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>testing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('id');
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    modal.find('.modal-body input').val(recipient);
});
</script>
</head>
<body>

<h4>Testing Bootstrap Modal</h4>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@test1">Open modal for @test1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@test2">Open modal for @test2
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@test3">Open modal for @test3
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

Answer 1

将脚本包装在文档就绪函数中：

$(function(){
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('id');
        var modal = $(this);
        modal.find('.modal-title').text('New message to ' + recipient);
        modal.find('.modal-body input').val(recipient);
    });
});

http://jsfiddle.net/q3kr8jft/

Answer 2

我也被这个问题困扰过。我直接从 Bootstrap 页面 ( http://getbootstrap.com/javascript/#modals-related-target ) 复制并粘贴了示例，但它不起作用。经过大量实验，我终于想通了 JavaScript/jQuery 代码：

$('#exampleModal').on('show.bs.modal', function (event) {
 ...
});

必须在加载 jQuery 库后放置在您的源代码中。标准 bootstrap 模板将

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

就在代码的末尾，这意味着该函数在代码中出现在它之前，而没有运行。一旦我将模态函数移动到 .html 的末尾，在 JavaScript 包含之后，它就完美地工作了。

Answer 3

做了一些工作，但这在 Chrome 版本 95.0.4638.54（官方构建）（64 位）中有效。我发现迈克尔的意见（2015 年 5 月 6 日）最有帮助。

使用 Bootstrap 的默认启动器 html 模板和 Bootstrap 可变模态数据示例。截至 2021 年 11 月 3 日的预期功能。

Jquery、Popper 和 Bootstrap JS 的所有依赖项都通过 jsdelivr 检索。

来源：

Bootstrap 4 模态文档 https://getbootstrap.com/docs/4.0/components/modal/

Bootstrap 4 启动器 HTML 模板 https://getbootstrap.com/docs/4.0/getting-started/introduction/

给 bootstrap 开发人员的提示： 确保在采用之前查看 link 到 bootstrap 文档以了解您正在查看哪个版本代码更改。（docs/4.0 对比 docs/5.0 等）

源代码完整：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 4.2.1 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>
    
    
    <!--JQuery 3.6.0-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>
    <!-- Bootstrap 4.2.1 Bundle with Popper 2.9.2 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
    <script>
    $(function(){
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('whatever');
            var modal = $(this);
            modal.find('.modal-title').text('New message to ' + recipient);
            modal.find('.modal-body input').val(recipient);
        });
    });
    </script>

  </body>
</html>

bootstrap 模态不显示检索到的信息

bootstrap modal not displaying information retrieved

jquery

html

bootstrap-modal