Simple responsive modal escrito en Pure JavaScript-Hey. js

Vista prévia

Descripción

Hey. js es un modal libre de dependencia simple, ligero y receptivo escrito en Vanilla JavaScript. Se puede incluir en línea o generarse dinámicamente. Accesible de forma predeterminada y libre de dependencias.

Funcionamiento

Cargue el estilo de hoja de estilo. min. CSS en la sección Head y el archivo JavaScript heyModal. min. js en la parte inferior de la página HTML.

<link rel="stylesheet" href="dist/css/style.min.css">
<script src="dist/js/heyModal.min.js"></script>

Cree el modal con el encabezado personalizado y el contenido del cuerpo como esto:

<div id="great-modal" style="display: none;">

<h3 data-hey-title>Modal <a href="#">title</a></h3>

<div data-hey-body>


<p>This is a modal and the contents</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis metus est, eu aliquet arcu




interdum eu. Mauris in tortor semper, pulvinar nunc et, tincidunt lectus. Donec erat ex, ultricies sit




amet pharetra <a href="#">sit amet</a>, elementum dictum velit. Aenean sed viverra eros. Mauris sagittis, nisi a rutrum




interdum, enim purus tempus magna, quis bibendum ante ante sit amet eros. Duis tempus ex sed lorem




porttitor, vitae dapibus ante scelerisque. In pharetra a nisl a condimentum. Vivamus congue volutpat




felis in mollis. Morbi ante sem, luctus at libero sit amet, euismod eleifend leo. Donec sodales feugiat




ex ac dapibus. Sed sit amet fringilla mauris.</p>

</div>
</div>

Es posible que necesite un botón de desencadenador para alternar la ventana modal.

<a href="#great-modal" class="modal-trigger button">Show me the modal</a>

Active el modal y especifique el selector de desencadenador:

document.addEventListener('DOMContentLoaded', () => {

const myMod = heyModal(document.querySelector('.modal-trigger'));
});

Abra y cierre la ventana modal manualmente.

myMod.open();
myMod.close();

Eventos.

myMod.comp.wrapper.addEventListener('heyOpen', () => {


console.log('open!');
});

myMod.comp.wrapper.addEventListener('heyClose', () => {


console.log('close!');
});

Registro de cambios

v1.1.5 (09/19/2018)

• Pequeños ajustes a la organización de botones.