Implementing Modal

[nlmf123]

Hi, good day/. I am new here @ django-unicorn. i just wanna ask how you guys implement a simple modal using django-unicorn?

[MJPawluk]

Hi nlmf123!

I used bulma.io which has a modal component. To activate the component you have to add is-active to the class attribute of the modal.

For the .py file of the component I did something like this:

# modal.py
from django_unicorn.components import UnicornView


class ModalView(UnicornView):
    is_active = ""

    def toggle_modal(self):
        if self.is_active == "":
            self.is_active = "is-active"
        else:
            self.is_active = ""

And in the .html file for the component:

<!-- modal.html -->
<div>
  <button unicorn:click="toggle_modal()"></button>
    
  <div class="modal {{ is_active }}">
          <!-- Modal contents here -->
  </div>
</div>