CSS - Tetum - Konfirmasaun Hamoos uza Modal Bootstrap
Saida mak Bootstrap Modal?
Iha Bootstrap, modal mak komponente ida ne'ebé permite ita atu hatudu konteúdu, formuláriu, ka mensajen iha janela pop-up. Ida ne'e bele uza hodi hatudu informasaun adisionál sira ka hatudu notifikasaun. Modal Bootstrap kria uza HTML and JavaScript. Atu hatene liu tan saída mak Bootstrap Modal favor vizita dokumentasaun ofisial kona-ba Bootstrap Modal iha ne'e https://getbootstrap.com/docs/5.0/components/modal/
Prerekezitu - Hamoos/Delete objetu ruma iha Projetu Django uza Bootstrap Modal
- Kria Projetu Django ida
- Instala Bootstrap
Iha modelu barak ne'ebé ita atu uza Bootstrap iha ita-nia Projetu Django favor refere ba ofisial dokumentu ne'e https://getbootstrap.com/docs/3.4/getting-started/.
Ba ezemplu ida ne'e hau frefere liu uza deit CDN (Content delivery network) ba pratika.
Kopia kodígu HTML iha kraik no paste iha ita-nia projetu templates/base.html file. Ita bele halo mudansa ba templates husi ezemplu ne'e, hodi adapta tuir ita-boot sira nia nesesidade. Bootstrap atu la'o diak liu presiza inklui mos ho JQuery ne'e importante tebe-tebes.
templates/base.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<body> {% block header %}{% endblock %}
{% block content %} {% endblock %}{% block footer %}
</body>
{% endblock %}
</html>
templates/base_site.html
{% extends 'base.html' %}
{% block header %}
<h1>Header Goes here...</h1>
{% endblock %}
{% block footer %}
<footer>
<div class="row text-center">
<div class="col-md-12">
<p>{% trans 'Developed by:' %}</p>
<p>Onorio de Jesus © {% now "Y" %}</p>
</div>
</div>
</footer>
{% endblock %}
app/views.py
from django.shortcuts import render, get_object_or_404
from django.http import HttpResponseRedirect
from .models import Post
def post_delete(request, pk):
post_item = Post.objects.get(id=pk) # Bolu tabela naran Post ne'ebé define ona iha models.py
if request.user == post_item.author:
context = {}
obj = get_object_or_404(Post, id=pk)
if request.method =="POST":
obj.delete()
messages.success(request, _("Your post deleted successfully!"))
return HttpResponseRedirect("/post/")
else:
error_msg = _("Sorry! You are not owner of this post!")
return render(request, 'app/feedback_failed_delete.html', {'error_msg': error_msg})
app/app_list.html
{% extends 'base_site.html' %}
{% block content %}
<!-- If delete fail, alert this -->
<div class=" alert alert-danger" role="alert"> <p>{{ error_msg }}</p> </div> <!-- End of If delete fail, alert --> <!-- Button delete modal --> <a class="btn btn-danger" href="#" data-href="{% url 'post_delete' post.pk %}" data-toggle="modal" data-target="#confirm-delete-{{ post.pk }}"></a><!-- End of button delete blog -->
<!-- Modal confirmation delete blog --> <div class="modal fade" id="confirm-delete-{{ post.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> {% include 'app/confirm_delete.html' %}</p> </div> </div> </div> <!-- End of Modal confirmation delete blog --> {% endblock %}
app/confirm_delete.html
{% load i18n %}
<form class="form-delete" action="{% url 'post_delete' post.pk %}" method="POST"> {% csrf_token %} <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">{% trans 'Confirm Delete' %}</h4> </div> <div class="modal-body"> <p>{% trans 'You are about to delete one Blog, this procedure is irreversible.' %}</p> <p>{% blocktrans %} Are you sure you want to delete "<strong>{{ post }}</strong>"? {% endblocktrans %}</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">{% trans 'Cancel' %}</a> <button class="btn btn-danger btn-ok">{% trans 'Delete' %}</button> </div> </form>