jquery 引导模式不显示检索到的信息

s8vozzvw 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(121)

我有一个非常基本的简单模式，它是由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>

字符串

jquery

来源：https://stackoverflow.com/questions/28782582/bootstrap-modal-not-displaying-information-retrieved

3条答案

按热度按时间

bvk5enib1#

将脚本 Package 在文档就绪函数中，如下所示：

$(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/

赞(0）回复(0）举报 2023-08-04

kq0g1dla2#

我也在这个问题上挣扎。我直接从Bootstrap页面（www.example.com）复制并粘贴了该示例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>

型
就在代码的末尾，这意味着函数在代码中出现在它之前，它不会运行。一旦我将模态函数移到JavaScript includes之后的.html末尾，它就完美地工作了。

赞(0）回复(0）举报 2023-08-04

qjp7pelc3#

当我试图用Bootstrap 5.2实现可变模态内容示例时，也遇到了同样的问题。我是通过确保

<script>
...
</script>

字符串
在我的弹出模式代码之后出现。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 引导模式不显示检索到的信息

3条答案

相关问题

热门标签

最新问答