Question

我想允许模式根据数据库中设置的id显示。将容器中显示的不同水果/蔬菜分成瓷砖，我将其ID放在班级的id字段中。

换句话说，在特定水果的叠加层中按一个按钮会显示一个包含其余信息的模态。

HTML CODE：

{% block body_block %}
<div class="container-fruits">
    <div class="row">
        {% for t in thumb %}
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">
                {% thumbnail t.image "255x189" crop="center" as im %}
                    <div class="hovereffect">
                        <img class="img-responsive" src="{{ im.url }}" alt="Card image cap">
                        <div class="overlay">
                            <h2>{{ t.name }}</h2>
                            <a id="{{ t.id }}" class="info" data-target="#{{ t.id }}" href="#">show details</a>
                        </div>
                    </div>
                {% endthumbnail %}
            </div>
        {% endfor %}
    </div>
</div>

{% for t in thumb %}
    <div id="{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
        <div class="modal-dialog modal-lg ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h2 class="modal-title">{{ t.name }} information</h2>
                </div>

                <div class="modal-body">
                    <h2 class="modal-body-text">{{ t.description }}</h2>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<script src="{% static 'javascript/fruits.js' %}"></script>

{% endblock %}

使用Javascript / Jquery的

$(document).ready(function () {
$('.info').click(function (e) {
    $(".fruitsModal").fadeIn('slow');
    var image = $(e.relatedTarget).attr('src');
    var text = $(e.relatedTarget).attr('t.name');
    $(".img-responsive").attr("src", image);
    $(".modal-body").attr("modal-body-text", text);
    console.log('hello bind');

});
$(".btn-default").click(function () {
    $(".fruitsModal").fadeOut('slow');
});
});

Answer 1

要打开特定ID所针对的模式，您只需要知道ID和

从id代码

id="{{ t.id }}"

a

重命名目标data-target="#modal-{{ t.id }}"，以避免多个相同的id更好。
```
<a data-toggle="modal" class="info" data-target="#modal-{{ t.id }}"....
```

最后重命名模态的id，就像

上面的目标一样

<div id="modal-{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">

标记a变为：

<a class="info" data-target="#modal-{{ t.id }}" href="#">show details</a>

模态：

<div id="modal-{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
    <div class="modal-dialog modal-lg ">

第一个选项：

如果您需要让bootstrap为您完成所有操作，则表示当您在没有脚本的情况下点击a时，the modal会显示。

只需将data-toggle属性添加到您的a代码中，然后将相同的data-target值添加到href。

    <a data-toggle="modal" href="#modal-{{ t.id }}" data-target="#modal-{{ t.id }}"

在这种情况下，并不真正需要data-target=""

第二个选项：

因为你想在展示模态之前做一些事情，这符合你的需要。当触发带有a事件的click标记时，是js，您只需要显示相关模态


    $('.info').click(function (e) {
        $(".fruitsModal").fadeIn('slow');
        var image = $(e.relatedTarget).attr('src');
        var text = $(e.relatedTarget).attr('t.name');
        $(".img-responsive").attr("src", image);
        $(".modal-body").attr("modal-body-text", text);
        console.log('hello bind');
        // # retrieve the target modal: data-target="#modal-{{ t.id }}"
        var t_modal = $("this").data('target');
        $(t_modal).show(); // this is because you have style={display:none}
        $(t_modal).modal('show');
    });

Django模式显示基于类ID列表

1 个答案: