Plugin de JavaScript de capital mínimo accesible-Pure-capital

Vista prévia

Descripción

Pure-modal es un componente modal minimalista, limpio, accesible y animado para el diseño web moderno.

Funcionamiento

Inserte el código JavaScript de Pure-modal y la hoja de estilos en la página HTML.

<link href="modal.css" rel="stylesheet">
<script src="modal.js"></script>

Cree el código HTML para la ventana modal.

<div class="modal" id="modal1" role="dialog" aria-labelledby="modal-1" aria-describedby="basic-modal" tabindex="-1" style="display: none;">

<div class="modal-dialog">


<div class="modal-content">



<div class="modal-header">




<h5 class="modal-title">Modal Title</h5>




<button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">





<svg width="16" height="16" viewBox="0 0 40 40">






<path stroke-linecap="round" class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" stroke="#000" fill="transparent" stroke-width="5"></path>





</svg>




</button>



</div>



<div class="modal-body">




Modal Content



</div>



<div class="modal-footer">




<button data-dismiss="modal" aria-label="Close">Close</button>



</div>



</div>


</div>

</div>
</div>

Cree un elemento desencadenante (botón o vínculo) para alternar la ventana modal.

<button data-toggle="modal" data-target="modal1">Launch The Modal</button>

Inicialice el plugin Pure-modal y listo.

const modal1 = new Modal('modal1');

modal1.init();

Desactive/habilite el efecto de transición.

const modal1 = new Modal('modal1',{



{ transition: false }
});

modal1.init();

Registro de cambios

04/14/2019

• Refactorizado, errores corregidos, nueva compilación