JAVASCRIPT ::Minimal Modal Component In Vanilla JavaScript – Mimodal

AUTHOR:	Draggable
VIEWS TOTAL:	35
OFFICIAL PAGE:	Go to website
LICENSE:	MIT

Demo Download

---

Mimodal is a vanilla JavaScript plugin helps you create multi-purpose modal windows with minimal effort.

Basic usage:

Download and the insert the stylesheet modal.css & javascript modal.js into your html page.

1	<link rel="stylesheet" href="dist/modal.css">

2	<script src="dist/modal.js"></script>

Create a basic modal window.

1	<button class="default"

2	data-toggle="modal"

3	data-modal-style="simple"

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

5

Click me

6

</button>

Create a modal window with a fade animation.

1	<button class="default"

2	data-toggle="modal"

3	data-modal-style="fade"

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

5

Click me

6

</button>

Create a modal window that auto dismiss after 3 seconds.

1	<button class="default"

2	data-toggle="modal"

3	data-modal-style="fade"

4	data-modal-timeout="3000"

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

6

Click me

7

</button>

Create a modal dialog with confirm & cancel buttons.

1	<button class="default"

2	data-toggle="dialog"

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

4

Click me

5

</button>

Mimodal’s real power is in its extensibility. By passing a configuration option your modals can do whatever you need them to do. Here’s an example that helps you create a draggable modal window.

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

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

02	room: 'draggable/mimodal'

03

};

04

05	var getScripts = function() {

06	var scripts = [];

07	var extScripts = [

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

09

];

10

11	var i = (extScripts.length - 1);

12

13	function readyState() {

14	var script = this;

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

16	script.onload = script.onreadystatechange = null;

17

i--;

18	if (i === -1) {

19	// remove script after added

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

21	scripts[i].remove();

22

}

23

} else {

24	getScript(i);

25

}

26

}

27

}

28

29	function getScript(i) {

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

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

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

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

34	script.async = true;

35	// Attach handlers for all browsers

36	script.onload = script.onreadystatechange = readyState;

37	scripts.push(script);

38	document.body.appendChild(script);

39

}

40

41	// if (isSite) {

42	getScript(i);

43

// }

44

45

};

46

47	getScripts();

48

49	var buttons = document.getElementsByTagName('button');

50	var buttonCallbacks = {

51	simpleWarning: function() {

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

53	timerContainer = document.createElement('h1'),

54	timer = 3;

55	modal.appendChild(timerContainer);

56	timerContainer.innerHTML = timer;

57	var countDown = function countDown() {

58	timerContainer.innerHTML = String(timer--);

59	if (timer === 0) {

60	clearInterval(countdownInterval);

61

}

62

};

63	var countdownInterval = setInterval(countDown, 1000);

64	countDown();

65

},

66	draggable: function(){

67	var modalOptions = {

68	modalHeader: 'I\'m Draggable',

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

70	draggable: true

71

};

72	window.mimodal.dialog(modalOptions);

73

}

74

};

75

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

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

78	if (callback) {

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

80

}

81

}

Tweet