我有问题。我是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')
]
我不需要现成的解决方案。胡萝卜也可以。我需要向我推荐的方向
答案 0 :(得分:0)
对于这样的事情,如果您使用引导程序很简单,它将很有用,否则,您必须连接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">×</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>