Django如何在modal中显示详细信息页面

2024-07-04 08:50:05 发布

您现在位置：Python中文网/ 问答频道 /正文
7189 3

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

这是我的页面，有一个汽车列表car\u list.html。关于汽车详细信息URL

{% 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\u detail.html，我想在modal中显示它

{% 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 %}

以及我的视图.py和车的详细视图

@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})

和URL.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')
]

我不需要现成的解决方案。胡萝卜也可以。我需要建议我该往哪个方向走


Tags： pathnamedividmainhtmlcarcars
1条回答
网友
1楼 · 发布于 2024-07-04 08:50:05

对于这样的事情，如果您使用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>

相关问题 更多 >

    编程相关推荐

    热门问题