Componente modal mínimo en JavaScript Mimodal,js

Vista prévia

Descripción

Mimodal es un plugin de JavaScript vainilla que le ayuda a crear ventanas modales multipropósito con un mínimo esfuerzo.

¿Cómo funciona?

Descargue e inserte la hoja de estilos modal. CSS & JavaScript modal. js en su página HTML.

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

Cree una ventana modal básica.

<button class="default"




 data-toggle="modal"




 data-modal-style="simple"




 data-modal-content="This is as simple as it gets.">




Click me
</button>

Cree una ventana modal con una animación de fundido.

<button class="default"




 data-toggle="modal"




 data-modal-style="fade"




 data-modal-content="I just fade in.">




Click me
</button>

Cree una ventana modal que se descarte automáticamente después de 3 segundos.

<button class="default"




 data-toggle="modal"




 data-modal-style="fade"




 data-modal-timeout="3000"




data-modal-content="Consider yourself warned.">




Click me
</button>

Crear un cuadro de diálogo modal con confirmar & Cancelar botones.

<button class="default"




 data-toggle="dialog"




 data-modal-content="Are you sure you want to do this?">




Click me
</button>

El poder real de Mimodal está en su extensibilidad. Al pasar una opción de configuración, tus modales pueden hacer lo que necesites. Este es un ejemplo que le ayuda a crear una ventana modal arrastrable.

<button class="default" id="draggable">Click me</button>

((window.gitter = {}).chat = {}).options = {

room: 'draggable/mimodal'
};

var getScripts = function() {

var scripts = [];

var extScripts = [


'//sidecar.gitter.im/dist/sidecar.v1.js'

];


var i = (extScripts.length - 1);


function readyState() {


var script = this;


if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') {



script.onload = script.onreadystatechange = null;



i--;



if (i === -1) {




// remove script after added




for (i = scripts.length - 1; i >= 0; i--) {





scripts[i].remove();




}



} else {




getScript(i);



}


}

}


function getScript(i) {


var script = document.createElement('script');


script.appendChild(document.createTextNode(''));


script.setAttribute('src', extScripts[i]);


script.setAttribute('type', 'text/javascript');


script.async = true;


// Attach handlers for all browsers


script.onload = script.onreadystatechange = readyState;


scripts.push(script);


document.body.appendChild(script);

}


// if (isSite) {

getScript(i);

// }

};

getScripts();

var buttons = document.getElementsByTagName('button');
var buttonCallbacks = {

simpleWarning: function() {


var modal = document.querySelector('.mimodal'),



timerContainer = document.createElement('h1'),



timer = 3;


modal.appendChild(timerContainer);


timerContainer.innerHTML = timer;


var countDown = function countDown() {



timerContainer.innerHTML = String(timer--);



if (timer === 0) {




clearInterval(countdownInterval);



}


};


var countdownInterval = setInterval(countDown, 1000);


countDown();

},

draggable: function(){


var modalOptions = {



modalHeader: 'I\'m Draggable',



modalContent: 'This modal is draggable, try dragging from the move icon in the control bar or from the borders of the modal.',



draggable: true


};


window.mimodal.dialog(modalOptions);

}
};

for (var i = 0; i < buttons.length; i++) {

var callback = buttonCallbacks[buttons[i].id];

if (callback) {


buttons[i].addEventListener('click', callback);

}
}