Modal

Veja como utilizar

Acrescentar um data-modal="open" e um aria-controls="#nome-do-id" no elemento que vai abrir o modal. Colocar no elemento target, um data-modal="container" e um id com o mesmo nome contido aria-controls. Acrescentar ainda, um data-modal="close" no elemento de botão que fecha o modal.

Para definir o tamanho do modal, deve-se colocar uma classe no elemento container do modal com nome de x-small, ou small, ou medium ou large. As classes podem ter qualquer nome e serem estilizadas livremente.

Modal x-smallModal smallModal mediumModal large

HTML Exemplo

 <a class="btn-modal" aria-controls="#modal" data-modal="open">Modal medium</a>

 <section class="modal" data-modal="container" id="modal">
   <div class="modal-container medium form">
     <button data-modal="close" class="modal-close">X</button>
     <div class="modal-wrapper">
       <form action="">
         <label for="email">Email</label>
         <input type="text" form="email" id="email">
         <label for="email">Senha</label>
         <input type="password" form="senha" id="senha">
         <button type="submit">Entrar</button>
       </form>
     </div>
   </div>
 </section>