【发布时间】：2026-02-08 14:25:01
【问题描述】：
我有一个由 Bootstrap 提供的非常基本的简单模式。 我正在尝试完成这项工作，但由于某种原因，它不会返回存储在 data-id 中的值，并且一切看起来与引导教程中的完全相同。我认为它甚至没有使用 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">×</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>
【问题讨论】：
-
您的控制台是否有任何错误？你启用了 JavaScript 吗？
-
javascript 已启用，因为我有一个不同的 html，它使用 jQuery 动态添加额外的行并且工作正常。控制台中没有错误。我正在使用 Safari 网络开发人员工具
标签： jquery html bootstrap-modal