Ventana modal deslizante inferior con vainilla JavaScript-Mohill

Vista prévia

Descripción

Mohill es un plugin de JavaScript vainilla para crear una ventana modal deslizándose desde la parte inferior de la pantalla cuando se activa.

Install the Mohill:

# Yarn
yarn add mohill

# NPM
$ npm install mohill

¿Cómo funciona?

Enlace al archivo principal de JavaScript:

<script src="mohill.js"></script>

Cree las ventanas modales:

<div id="app">

<div id="modal-1" class="page" style="display:none">


Modal 1 Content


<div class="close">Close</div>

</div>

<div id="modal-2" class="page" style="display:none">


Modal 2 Content


<div class="close">Close</div>

</div>
</div>

Crear elementos desencadenantes para alternar las ventanas modales:

<div id="button1"></div>
<div id="button2"></div>

Cree un nuevo objeto Mohill y especifique el contenedor modal.

const mohill = new Mohill({

target: document.getElementById('app'),

data: {


style: {



coverBackgroundColor: 'rgba(0,0,0,.4)'


}

}
});

Active los elementos desencadenantes para alternar las ventanas modales deseadas:

document.getElementById('button1').addEventListener('click', () => {

mohill.setStyle({backgroundColor: '#0d5661'});

mohill.open('demo-1');
});

document.getElementById('button2').addEventListener('click', () => {

mohill.setStyle({backgroundColor: '#6d2e5b'});

mohill.open('demo-2');
});

Active el botón de cierre dentro de las ventanas modales.

Array.prototype.slice.call(document.getElementsByClassName('close'))

.forEach(el => {


el.addEventListener('click', () => {



mohill.close();


});

});

Invalide los estilos predeterminados de la ventana modal.

const mohill = new Mohill({


target: document.getElementById('app'),

data: {


style: {



height: '70vh',



width: '70%',



coverBackgroundColor: 'rgba(0,0,0,.4)',



backgroundColor: '#222',



borderRadius: '6px'


}

}

});