基于类ID列表的Django模式显示

Question

I would like to allow the modal to be displayed on the basis of the id set from the database. Having different fruit/vegetables displayed in the container divided into tiles, I put their id in the id field of the class.

In other words, pressing a button in the overlay class for a particular fruit displays a single modal with the rest of the information.

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

To open the modal targeted by a specific ID, you just need to know the ID and

• Remove the id id="{{ t.id }}" from your a tag

• Rename your target data-target="#modal-{{ t.id }}" to make it a little better to avoid multiple identical id s.

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

• Finally rename the id of your modals, like the target above

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

The tag a becomes:

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

And the modal:

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

1st Option :

If you need to let bootstrap do everything for you, means when you click on a without your script, the modal will show up.

Just add the data-toggle attribute to your a tag, and add the same value of data-target to href .

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

In that case, the data-target="" is not really needed

2nd option :

As you want to do some stuff before showing the modal, this fits your need. When triggering the a tag with click event, is js, you just need to show the concerned modal

    $('.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 }}"
        
         // this is because you have style={display:none}
        
    });