Модальное отображение Django на основе списка идентификаторов классов - PullRequest
Новая
       11

Модальное отображение Django на основе списка идентификаторов классов

0 голосов
/ 11 июня 2018

Я бы хотел, чтобы модал отображался на основе идентификатора, установленного из базы данных.Когда в контейнере были разбиты различные фрукты / овощи, я поместил их идентификатор в поле идентификатора класса.

Другими словами, нажатие кнопки в классе наложения для определенного фрукта отображает один модальный режим с остальной информацией.

КОД HTML: 

{% 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');
});
});

1 Ответ

0 голосов
/ 11 июня 2018

Чтобы открыть модальный объект с указанным идентификатором, вам просто нужно знать идентификатор и

  • Удалить id id="{{ t.id }}" из тега a

  • Переименуйте вашу цель data-target="#modal-{{ t.id }}", чтобы было немного лучше избегать нескольких идентичных id s. 

    <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 ">

1-й вариант :

Если вам нужно, чтобы загрузчик сделал все за вас, значит, когда вы нажимаете a без вашего скрипта, the modal будет отображаться.

Просто добавьтеатрибут data-toggle для вашего тега a и добавьте то же значение data-target к href. 

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

В этом случае data-target="" на самом деле не требуется

2-й вариант :

Поскольку вы хотите сделать что-то перед тем, как показывать модал, это соответствует вашим потребностям.При запуске тега 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 }}"
        <b>var t_modal = $("this").data('target');</b>
        <b>$(t_modal).show();</b> // this is because you have style={display:none}
        <b>$(t_modal).modal('show');</b>
    });
...