htmx + bootstrap modal

13 Nov 2022, 12:12 PM
Coding
0 Komen
htmx + bootstrap modal

dekat main page

            <button type="button" class="btn btn-icon-info" hx-get="{{ post.url }}"> 
<i class="fa fa-window-restore"></i></button>
        
            <div class="modal fade" tabindex="-1" id="modal-snippet">
        <div  id="dialog" class="modal-dialog modal-dialog-scrollable" ></div>
</div>
        

dekat detail page

            {% load wagtailcore_tags %}
<script>$('#modal-snippet').modal('show');htmx.on("hidden.bs.modal", () => {document.getElementById("dialog").innerHTML = ""})</script>
<div class="modal-content">
<div class="modal-header  bg-light-dark">
<h5 class="modal-title">{{ page.tajuk_detail}}</h5>
<button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
  data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-1 text-gray-500">&times;</span>
</button>
</div>
<div class="modal-body">
  {% for block in page.content %}
 {% include_block block %}
{% endfor %}
</div>
<div class="modal-footer bg-light-dark">
<button type="button" class="btn btn-outline btn-outline-info" data-bs-dismiss="modal">Kembali
</button>
</div>
</div>
        
            def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)

        all_post = Upload.objects.live().public().order_by('-first_published_at')
        paginator = Paginator(all_post, 4)
        page = request.GET.get('page')
        try:
            posts = paginator.page(page)
        except PageNotAnInteger:
            posts = paginator.page(1)
        except EmptyPage:
            posts = paginator.page(paginator.num_pages)

        context["posts"] = posts


        return context
        

Penafian: Pihak kami tidak bertanggungjawab terhadap sebarang kehilangan atau kerosakan yang dialami kerana menggunakan maklumat dalam website ini dan segala yang tertera tidak berkenaan dengan sama ada yang hidup atau pun dah mati.

Tiada sebarang komen setakat ini.

Tak puas hati? Tulis komen anda disini

Tags

bootstrap
html
htmx
python

Snippet Berkaitan

Delete duplicate 4 Dec 2022, 10:10 PM
Django Admin EZ Mode 13 Dec 2022, 9:09 PM
Jupyter Notebook Kernel 22 Jan 2023, 2:02 PM
Python Date 8 Nov 2022, 12:12 AM
Python NRIC 14 Nov 2022, 10:10 PM