Modal

El modal es un componente que sobresale de la interfaz como ventana emergente, Usado para mostrar notificaciones, formularios adicionales o cualquier tipo de información

La ventana esta compuesta por una cabecera, un cuerpo y un pie de pagina.

Para poder vizualizar la ventana, se hace uso de un elemento externo.

Uso

Copias el snippet HTML y ten en cuenta:

El elemento con la clase nkn-modal-content es el elemento que crea el fondo oscuro que permite resaltar al modal.
El elemento con la clase nkn-modal es la ventana emergente, debe ir el id del modal.

Para definir el tamaño del modal utilizamos alguna de las siguientes clases:

Clase	Tamaño de Modal
nkn-small	400px x 300px
nkn-medium	600px x 400px
nkn-large	800px x 400px

Deben de acompañar a la clase nkn-modal, de la siguiente manera

El elemento con la clase nkn-modal-heading es la cabecera del modal, está compuesta por el titulo y el "close modal".
El elemento con la clase nkn-icon-close es un icono que permite cerrar el modal. Debe tener el atributo data-nkn-role = "close-modal" .
El elemento con la clase nkn-modal-content es el contenido del modal.
El elemento con la clase nkn-modal-footer es el pie de página del modal.

Formas de abrir el modal

Atributos "data":

Permite visualizar el modal mediante el uso de atributos tipo "data".

El elemento desencadenate debe tener los atributos:

data-nkn-role = "open-modal": para abrir el modal.
data-nkn-target = "id del modal": para identificar el modal a abrir.

Ejemplo:

JavaScript:

Permite visualizar el modal mediante el uso de un script.

El elemento desencadenate debe tener el atributo:

ID: para que el script identifique el elemento que ejecute el evento click que desencadena la accion de abrir el modal.

Ejemplo:

<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">
            La 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">La unkuña tambien es utilizada para cargar papas, pan, y para llevar las "cosas de la tierra" en diferentes ceremonias tradicionales de los Andes.</p>
        </div>
        <div class = "nkn-modal-footer">
            <div class = "nkn-text-right">
                <button  data-nkn-role = "close-modal" class = "nkn-button">Cerrar</button>
            </div>            
        </div>
    </div>
</div>
<script>
    var myOpenModalButton1 = document.getElementById("btn-open-modal");
    myOpenModalButton1.addEventListener("click", function(){
        nkn.openModal(document.getElementById("modal2"));
    });
</script>

Más ejemplos

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">
            Iniciar Sesion
            <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">Cerrar</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">
            Registro
            <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">Nombres:</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">Apellidos:</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">Direccion:</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">Telefono:</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">Cerrar</button>
                <button class="nkn-button">Registrar</button>
        </div>
    </div>
</div>