Question

我有一个非常基本的简单模态，由Bootstrap提供。我试图让这项工作，但由于某种原因，它不会返回存储在data-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库之后，

必须放在源代码中。标准引导程序模板放置

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

就在代码的末尾，这意味着函数在代码中出现在它之前，并且它不会运行。

之后，一旦我将模态函数移动到我的.html末尾后，它就完美了。

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

2 个答案: