Modal accesible animado en JavaScript puro-microModal

Vista prévia

Descripción

microModal es una biblioteca de JavaScript ligera para insertar ventanas modales animadas y accesibles en el documento.

Instalación

# Yarn
$ yarn add micromodal

# NPM
$ npm install micromodal --save

Funcionamiento

Cree la ventana modal con su propio contenido como este:

<div class="modal micromodal-bounce" id="modal-1" aria-hidden="true">

<div class="modal__overlay" tabindex="-1" data-micromodal-close>


<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" aria-describedby="modal-1-content">



<div role="document">




<header class="modal__header">





<h3 class="modal__title" id="modal-1-title">






Micromodal





</h3>





<button class="modal__close" aria-label="Close modal" aria-controls="modal__container1" data-micromodal-close></button>




</header>




<main class="modal__content" id="modal-1-content">





<p>






Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.





</p>




</main>




<footer class="modal__footer">





<button class="modal__btn modal__btn-primary">Continue</button>





<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>




</footer>



</div>


</div>

</div>
</div>

Agregue el archivo JavaScript compilado ' MicroModal. js ' a la Página Web.

<script src="dist/micromodal.js"></script>

Inicializar la ventana modal.

MicroModal.init();

Mostrar la ventana modal.

MicroModal.show('modal-1');

Los estilos CSS de ejemplo para la ventana modal.

.modal[aria-hidden='true'] { display: none; }

.modal { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }

.modal__overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,0.6);

display: flex;

justify-content: center;

align-items: center;
}

.modal__container {

background-color: #fff;

padding: 30px;

max-width: 500px;

max-height: 100vh;

border-radius: 4px;

overflow-y: auto;

box-sizing: border-box;
}

.modal__header {

display: flex;

justify-content: space-between;

align-items: center;
}

.modal__title {

margin-top: 0;

margin-bottom: 0;

font-weight: 600;

font-size: 1.25rem;

line-height: 1.25;

color: #00449e;

box-sizing: border-box;
}

.modal__close {

background: transparent;

border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {

margin-top: 2rem;

margin-bottom: 2rem;

line-height: 1.5;

color: rgba(0,0,0,.8);
}

.modal__btn {
 font-size: .875rem;

padding-left: 1rem;

padding-right: 1rem;
 padding-top: .5rem;
 padding-bottom: .5rem;

background-color: #e6e6e6;

color: rgba(0,0,0,.8);
 border-radius: .25rem;

border-style: none;

border-width: 0;

cursor: pointer;

-webkit-appearance: button;

text-transform: none;

overflow: visible;

line-height: 1.15;

margin: 0;

will-change: transform;

-moz-osx-font-smoothing: grayscale;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform: translateZ(0);

transform: translateZ(0);

transition: -webkit-transform .25s ease-out;

transition: transform .25s ease-out;

transition: transform .25s ease-out, -webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {

-webkit-transform: scale(1.05);

transform: scale(1.05);
}

.modal__btn-primary {

background-color: #00449e;

color: #fff;
}

Funciones de devolución de llamada disponibles.

MicroModal.init({

onClose: function(){},

onShow: function(){}
});

Registro de cambios

v0.3.2 (07/08/2018)

• BUGFIX la agrupación fija para las compilaciones es y UMD