Download Github


The modal is a component that stands out from the interface as a pop-up window, used to display notifications, additional forms or any type of information

The window is made up of a header, a body and a footer.

In order to visualize the window, an external element is used.


Copy the HTML snippet and keep in mind:

  1. The element with the nkn-modal-content class is the element that creates the dark background that makes the modal stand out.
  2. The element with the nkn-modal class is the popup window, where the id of the model must go.
  3. To define the size of the modal we use one of the following classes:
    Class Modal Size
    nkn-small 400px x 300px
    nkn-medium 600px x 400px
    nkn-large 800px x 400px
    They must accompany the nkn-modal class , as follows
    <div class= "nkn-modal (modal size class)"></div>
  4. The element with the class nkn-modal-heading is the heading of the modal, it is composed of the title and the "close modal".
  5. The element with the class nkn-icon-close is an icon that allows closing the modal. It must have the attribute data-nkn-role = "close-modal" .
  6. The element with the class nkn-modal-content is the content of the modal.
  7. The element with the nkn-modal-footer class is the footer of the modal.

Ways to open the modal

"data" Attributes:

It allows visualizing the modal by using "data" type attributes.

The triggered element must have the attributes:

  • data-nkn-role = "open-modal": to open the modal.
  • data-nkn-target = "id del modal": to identify the modal to open.



Allows you to view the modal by using a script.

The trigger element must have the attribute:

  • ID: for the script to identify the element that executes the click event that triggers the action to open the modal.


More examples

Modal Medium

Modal Large