django如何在模态中显示详细信息页面答案

【问题标题】：django how show detail page in modaldjango如何在模态中显示详细信息页面
【发布时间】：2020-12-06 20:47:21
【问题描述】：

我有问题。我是 django 和 python 的初学者，我需要帮助。我有一个包含汽车列表的页面，所有汽车都有一个带有信息的按钮。现在，此按钮将我重定向到另一个页面，但我想打开此详细视图，而不是在新页面中，而是在同一页面上的模式中。我尝试了许多解决方案，但没有一个对我的情况不起作用。

这是我的页面，其中包含汽车列表 car_list.html 。是关于 car_detailURL。

{% extends 'main/main.html' %}
{% block title %} Lista samochodów {% endblock %}
{% load static %}


{% block content %}
    {% for carTEMP in cars %}
    <div class="card bg-light mb-3">
        <h5 class="card-header">
            {{carTEMP}}
        </h5>
        <div class="card-body">
            <img src="/media/{{carTEMP.car_photo}}">
            <div class="row">
                <div class="col-sm-auto">
                    <p>Data produkcji: {{carTEMP.car_date_of_prod}}</p>
                    <p>Numer rejestracyjny: {{carTEMP.car_registration_nr}}</p>
                </div>
                <div class="col-sm-auto">
                    <a href="{% url 'car_detailURL' carTEMP.id %}"><i class="fas fa-2x fa-info-circle"></i></a>
                    <a href="{% url 'edit_carURL' carTEMP.id %}"><i class="fas fa-2x fa-edit"></i></a>
                    <a href="{% url 'delete_carURL' carTEMP.id %}"><i class="fas fa-2x fa-trash-alt"></i></a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    
    {% include "main/pagination.html" with page=cars %}
{% endblock %}

这是 car_detail.html 我想以模态显示。

{% extends "main/main.html" %}
{% load static %}

{% block title %}
Szczególy
{% endblock %}

{% block content %}
    <p><strong>Marka:</strong> {{ car.car_brand }}</p>
    <p><strong>Model:</strong> {{ car.car_model }}</p>
    <p><strong>Silnik:</strong> {{ car.car_engine }}</p>
    <p><strong>Rok produkcji:</strong> {{ car.car_date_of_prod }}</p>
    <p><strong>Numer rejestracyjny:</strong> {{ car.car_registration_nr }}</p>
{% endblock %}

还有我的 views.py 和 car_detail 视图。

@login_required
def car_detail(request, id):
    car = get_object_or_404(Car,
                            id=id,
                            car_available=True)

    return render(request, 'cars/car_detail.html',
                  {'car': car})

还有urls.py文件：

from django.urls import path, include
from . import views


urlpatterns = [
    path('all/', views.cars_list, name='cars_listURL'),
    path('available/', views.cars_list_available, name='cars_list_availableURL'),
    path('new/', views.new_car, name='new_carURL'),
    path('edit/<int:id>/', views.edit_car, name='edit_carURL'),
    path('delete/<int:id>/', views.delete_car, name='delete_carURL'),
    path('<int:id>/', views.car_detail, name='car_detailURL')
]

我不需要现成的解决方案。胡萝卜也可以。我需要建议我必须朝哪个方向前进

【问题讨论】：

嘿，看看这个stackoverflow.com/questions/50196148/…
我试过但没有工作，但这与我想做的类似。也许我做错了什么。
所以当你说它不起作用时，究竟是什么不起作用？
模型没有出现。从上面的示例中，我应该以模态形式操作什么？
我也试过这个：stackoverflow.com/questions/32958219/… 但是模态是空的

标签： python django modal-dialog

【解决方案1】：

如果您使用 bootstrap 非常容易，这样的事情会很有用，否则，您必须连接 Javascript 以使模态显示和隐藏。

我会给你一个例子，让你有一个想法

在 carlist.html 中，

...
<button id="myBtn">Open Modal</button>
...
{% include "main/car_detail.html" %}
{% endblock %}

对于 car_detail.html，我会给你一个例子，你可以得到洞察，

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* The Close Button */
.close {
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}



.btn{
  margin-top: 10%
}

.span-container{
  display:flex;
  justify-content: space-between;
}

</style>
</head>
<body>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="span-container">
      <h4>Crear Torneo</h4>
      <span class="close">&times;</span>
    </div>
      
         <div>
            ...
         </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

</body>
</html>

【讨论】：

起初，当我在 car_list.html 中包含 car_detail.html 时，它将在页面上可见，并且 car_detail 需要汽车 ID 以显示有关所选汽车的适当信息。