Ventana modal totalmente accesible con JavaScript puro

Vista prévia

Descripción

Esta es una versión pura de JavaScript de < a href = "https://github.com/gdkraus/accessible-modal-dialog" de Greg Kraus "target =" _ blank "rel =" noopener "> accesible-modal-Dialog que permite implementar una ventana modal totalmente accesible para el lector de pantalla Usuarios. No se requiere ninguna dependencia.

Funcionamiento

Coloque el script accessible-modal-Dialog. js en su página web.

<script src="accessible-modal-dialog.js"></script>

Cree el contenido modal.

<div class="modal" aria-hidden="true" id="my-accessible-modal">

<div class="modal-overlay" tabindex="-1" data-modal-hide></div>

<div class="modal-content" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog">


<div role="document">



<h1 id="modalTitle">Modal Title</h1>




Modal Content Goes here




<button data-modal-hide class="modal-close" title="Close registration form">&times;</button>


</div>

</div>
</div>

Estilo necesario para que el modal funcione.

.modal-overlay {

z-index: 2;

background-color: rgb(0, 0, 0);

background-color: rgba(0, 0, 0, 0.66);

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;
}

.modal-content {

background-color: rgb(255, 255, 255);

z-index: 3;

position: fixed;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);
}

.modal[aria-hidden="true"] {

display: none;
}

Cree un botón de alternancia modal.

<button data-modal-show="my-accessible-modal">view the modal window</button>

Inicializar la ventana modal.

(function () {

document.addEventListener('DOMContentLoaded', function () {


var modalEl = document.getElementById('my-accessible-modal');


var mainEl = document.getElementById('main');


var modal = new window.Modal(modalEl, mainEl);

});
}());

Para controlar manualmente el modal:

modal.show()
modal.hide()