Question

我正在尝试更改网页的互动，以便有关产品的其他信息显示在模式中，而不是单击按钮时显示/隐藏的元素。

我不确定的是使模态适应每个产品的内容。（我不确定django是否必须首先在后端准备3种不同的模态 - 如果可行或是否有更简单的方法？）

以前我有模板：

<div class="item price-2 col-md-4 col-12 text-center best-buy">
    <div class="item-inner">
      <div class="heading">
        <h3 class="title"><b>Cheapest</b></h3>
      </div>
    {% include 'components/quote_summary_item.html' with quote=first_quote %}
    </div><!--//item-inner-->
</div><!--//item-->

{％include'components / quote_detail.html'with quote = first_quote％}

quote_summary_item.html的位置：

<div>
  <div class="quotes-summary"><img src="{{ quote.ImageUrl }}" alt=""></div>
  <p></p>
  <p >.........
  </p>
  <a class="btn btn-quote-primary" href="{% url 'users:profile %}">Select</a></div>
<div class="content">
  <p><b>Your Quote Details</b></p>
  <p>{{ quote.Name }}<br/>
    {{ quote.Type }}  <br/>
    .....
  </p>
  <button class="btn btn-cta-secondary" data-id="{{ quote.priceId }}">Info</button>
</div><!--//content-->

和quote_detail是：

<div class="quote" id="quote{{ quote.priceId }}" style="display:none">
<div >
    <p><b>About this quote:</b></p>
  {{ quote.synopsisText|safe }}
  </div>
  <div class="row">
    <div class="col">
      <table class="table">
        <thead class="til-table-head">

        <tr>
          <th>Information</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td></td>
          <td>{{ quote.Something }}</td>
        </tr>

        <tr>
          <td>Name</td>
          <td>{{ quote.Name }}</td>
        </tr>
        <tr>
          <td></td>
          <td>{{ quote.payType }}</td>
        </tr>
       .......
        </tbody>
      </table>
    </div>
  </div>
    </div>

使用的.js是：

 <script type="text/javascript">
    $(document).ready(function () {
      $('.btn-cta-secondary').click(function (e) {
        var id = $(e.currentTarget).data('id')
        $('.quote').hide()
        $('#quote' + id).show()
      })
    })
  </script>

我已经在quotes_detail.html周围设置了一个模态模板包装器但是我不确定如何更改传递相关引用数据所需的.js： {% include 'components/quotes_modal.html' with quote=my_quote %}

并根据点击的按钮ID传递相关报价。

Answer 1

有两种不错的方法可以做到这一点。如果没有太多模态，则实现多个模态，或者如果有很多模式，则使用ajax来检索内容。

不需要.js文件，因为所有必需的j都内置到bootstrap中。

使用例如按钮控制每个模态：

<button type="button" class="btn btn-cta-secondary" data-toggle="modal" data-target="#{{ quote.priceId }}" data-id="{{ quote.priceId }}">More Info</button>

然后在相关页面中包含模态模板：

{% include 'components/quote_detail.html' with quote=second_quote %}
{% include 'components/quote_detail.html' with quote=first_quote %}

components/quote_details.html

<div class="modal fade" id="{{ quote.priceId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
 .....

其余的按照bootstrap文档。

要通过ajax执行此操作，请查看https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/

django如何实现动态（bootstrap）模式

1 个答案: