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:
- The element with the nkn-modal-content class is the element that creates the dark background that makes the modal stand out.
- The element with the nkn-modal class is the popup window, where the id of the model must go.
- 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<div class= "nkn-modal (modal size class)"></div>
- The element with the class nkn-modal-heading is the heading of the modal, it is composed of the title and the "close modal".
- 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" .
- The element with the class nkn-modal-content is the content of the modal.
- The element with the nkn-modal-footer class is the footer of the modal.
Ways to open the modal
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.