-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
120 lines (101 loc) · 5.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Z modal</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<link rel="stylesheet" href="https://benavern.github.io/z-grid/css/z-grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="highlight.js/monokai_sublime.css">
<link rel="stylesheet" href="z-modal/z-modal.min.css">
</head>
<body>
<header style="background-image: url(banner.jpg);"></header>
<section>
<div class="wrap">
<h1 class="big-title">Z-Modal</h1>
<small>05 sept 2015</small>
<div class="z-grid">
<div class="z-2">
<div class="z-box center-text"><a href="z-modal" class="download">Download</a></div>
</div>
<div class="z-2">
<div class="z-box center-text"><a href="http://github.com/benavern/z-modal" class="github">Github</a></div>
</div>
</div>
<h1>What is z-modal?</h1>
<p>Z-modal is a little javascript plugin that allows you create stylish modals. You will be able to put texts or html in the modals content and customize the title and the buttons.</p>
<p>It is written in vanillaJs, so that you don't need any third party libraries or frameworks.</p>
<hr>
<h1>Default behaviour</h1>
<p>Without any options, here is the default behaviour of the plugin:</p>
<button class="btn" id="demo1">Show me a modal please !</button>
<pre><code class="Javascript">var btnTest = document.getElementById('demo1');<br>var demo;<br>btnTest.addEventListener('click', function() {<br> demo = new ZMODAL();<br>})</code></pre>
<hr>
<h1>The options</h1>
<p>The plugin's options are written in a javascript object, they will overwrite the default settings.</p>
<ul>
<li><b>title</b>: (Default: "Z-MODAL") This is the title that will be inserted in the modal header section.</li>
<li><b>content</b>: Here you can use a string or an html node that will be inserted as a content in the modal.</li>
<li><b>closeBtn</b>: (Default: true) This is a boolean witch is used to say if the "close" button will appear.</li>
<li><b>buttons</b>: The array of objects representing the buttons that will be displayed at the bottom of the modal. There are options for that too:
<ul>
<li><b>label</b>: The text that will be displayed inside the button</li>
<li><b>half</b>: (Default: false) Used to decide if the button is 100% or 50% wide</li>
<li><b>callback</b>: A function that will fire after clicking the button (the modal will always close automatically!) </li>
</ul>
</li>
<li><b>className</b>: (Default: "") Add here some classNames if you want to apply some more styles. [SPACE separated]</li>
<li><b>autoload</b>: (Default: true) Tells the plugin to open the modal automatically or to open on the method call</li>
</ul>
<hr>
<h1>Javascript methods</h1>
<p>I have exposed 2 methodes: </p>
<ul>
<li><b>ZMODAL.open()</b>: This will be used just if the "autoload" option is setted at "false"</li>
<li><b>ZMODAL.close(callback)</b>: Here, You are able to close the modal and apply a callback (must be a function)</li>
</ul>
<hr>
<h1>Exemples</h1>
<h3>Without buttons and without close button</h3>
<pre><code class="javascript">var btndemo2 = document.getElementById('demo2');<br>var demo2;<br>var options2 = {<br> title : "Demo 2",<br> content : 'You can close the modal by clicking the overlay...',<br> closeBtn : false,<br> buttons : []<br>};<br>btndemo2.addEventListener('click', function() {<br> demo = new ZMODAL(options2);<br>});</code></pre>
<button id="demo2">Demo 2</button>
<hr>
<h3>With html inside and 2 buttons</h3>
<pre><code class="javascript">var btndemo3 = document.getElementById('demo3');<br>var htmlContent = document.createElement('p');<br>htmlContent.innerHTML = "This content is an HTML node!";<br>var demo2;<br>var options3 = {<br> title : "Demo 3",<br> content : htmlContent,<br> buttons : [<br> {<br> label: "Cancel",<br> half: true<br> },<br> {<br> label: "Ok",<br> half: true,<br> callback: function() {<br> alert("you are awesome!");<br> }<br> }<br> ]<br>};<br>btndemo3.addEventListener('click', function(){<br> demo = new ZMODAL(options3);<br>});</code></pre>
<button id="demo3">Demo 3</button>
<br>
<h3>Full width button and called with "open" method</h3>
<pre><code class="javascript">var btndemo4 = document.getElementById("demo4");<br>var demo4;<br>var options4 = {<br> title: "Demo 4",<br> content: "This works too ;-)",<br> buttons: [<br> {<br> label: "Yeah!",<br> half: false<br> }<br> ],<br> autoload: false<br>}<br>btndemo4.addEventListener('click', function(){<br> demo4 = new ZMODAL(options4);<br> demo4.open();<br>});</code></pre>
<button id="demo4">Demo 4</button>
<hr>
<h1>More...</h1>
<p>I developed this javascript plugin for me and wanted to share it with you because I think it can be usefull.</p>
<p>I don't guarantee that it is perfect but I tried to do my best with only vanilla javascript and basic css</p>
<p>Contributions, forks, pull requests, comments... are welcome! </p>
</div>
</section>
<footer>
<div class="wrap">
<div class="z-grid">
<div class="z-2">
<div class="z-box center-text">
<h3>Share my work via...</h3>
<div class="social-wrapper"></div>
</div>
</div>
<div class="z-2">
<div class="z-box center-text">
Made with <span class="heart">♥</span> by <a href="http://caradeuc.info">Benjamin Caradeuc</a>
<br><a href="mailto:[email protected]">Contact me</a>
</div>
</div>
</div>
</div>
</footer>
<script src="js/app.js"></script>
<script src="highlight.js/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="z-modal/z-modal.min.js"></script>
</body>
</html>