Modal

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.

Use

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

They must accompany the nkn-modal class , as follows

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

"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.

Example:

JavaScript:

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.

Example:

<button class="nkn-button" id="btn-open-modal">Modal "JavaScript"</button>
<div class="nkn-modal-container">
    <div id="modal2" class="nkn-modal nkn-small">
        <div class="nkn-modal-heading">
            The unkuña
            <div class="nkn-icon-close" data-nkn-role="close-modal">
                <svg class="nkn-icon">
                    <use xlink:href="/nkn/icons/sprites/icons.svg#close-icon"></use>
                </svg>
            </div>
        </div>
        <div class = "nkn-modal-content">
            <p class = "nkn-text-justify">The unkuña is also used to carry potatoes, bread, and to carry the "things of the earth" in different traditional ceremonies of the Andes.</p>
        </div>
        <div class = "nkn-modal-footer">
            <div class = "nkn-text-right">
                <button  data-nkn-role = "close-modal" class = "nkn-button">Close</button>
            </div>            
        </div>
    </div>
</div>
<script>
    var myOpenModalButton1 = document.getElementById("btn-open-modal");
    myOpenModalButton1.addEventListener("click", function(){
        nkn.openModal(document.getElementById("modal2"));
    });
</script>

More examples

Modal Medium

<button class="nkn-button" data-nkn-role="open-modal" data-nkn-target="modal-medium">Modal Medium</button>
<div class="nkn-modal-container">
    <div id="modal-medium" class="nkn-modal nkn-medium">
        <div class="nkn-modal-heading">
            Login
            <div class="nkn-icon-close" data-nkn-role="close-modal">
                <svg class="nkn-icon">
                    <use xlink:href="/nkn/icons/sprites/icons.svg#close-icon"></use>
                </svg>
            </div>
        </div>
        <div class="nkn-modal-content nkn-vertical-align">
            <form action="">
                <div class="nkn-row-padding">
                    <div class="nkn-col-s4">
                        <label class="nkn-label" for="username">Username:</label>
                    </div>
                    <div class="nkn-col-s8">
                        <input class="nkn-input" id="username" type="text">
                    </div>
                </div>
                <div class="nkn-row-padding">
                    <div class="nkn-col-s4">
                        <label class="nkn-label" for="password">Password:</label>
                    </div>
                    <div class="nkn-col-s8">
                        <input class="nkn-input" id="password" type="password">
                    </div>
                </div>
            </form>  
        </div>
        <div class="nkn-modal-footer nkn-space-between nkn-align-items-center">
            <button  data-nkn-role="close-modal" class="nkn-button">Close</button>
            <button class="nkn-button">Login</button>
        </div>
    </div>
</div>

Modal Large

<button class="nkn-button" data-nkn-role="open-modal" data-nkn-target="modal-large">Modal Large</button>
<div class="nkn-modal-container">
    <div id="modal-large" class="nkn-modal nkn-large">
        <div class="nkn-modal-heading">
            Registration
            <div class="nkn-icon-close" data-nkn-role="close-modal">
                <svg class="nkn-icon">
                    <use xlink:href="/nkn/icons/sprites/icons.svg#close-icon"></use>
                </svg>
            </div>
        </div>
        <div class="nkn-modal-content">
            <form action="">
                <div class="nkn-row-padding">
                    <div class="nkn-col-s3">
                        <label class="nkn-label" for="name">First Name:</label>
                    </div>
                    <div class="nkn-col-s9">
                        <input class="nkn-input" id="name" type="text">
                    </div>
                </div>
                <div class="nkn-row-padding">
                    <div class="nkn-col-s3">
                        <label class="nkn-label" for="last-name">Last Name:</label>
                    </div>
                    <div class="nkn-col-s9">
                        <input class="nkn-input" id="last-name">
                    </div>
                </div>
                <div class="nkn-row-padding">
                    <div class="nkn-col-s3">
                        <label class="nkn-label" for="address">Address:</label>
                    </div>
                    <div class="nkn-col-s9">
                        <input class="nkn-input" id="address">
                    </div>
                </div>
                <div class="nkn-row-padding">
                    <div class="nkn-col-s3">
                        <label class="nkn-label" for="address">Phone:</label>
                    </div>
                    <div class="nkn-col-s4">
                        <input class="nkn-input" id="address">
                    </div>
                </div>
            </form>  
        </div>
        <div class="nkn-modal-footer nkn-space-between nkn-align-items-center">
                <button  data-nkn-role="close-modal" class="nkn-button">Close</button>
                <button class="nkn-button">Register</button>
        </div>
    </div>
</div>