-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
151 lines (150 loc) · 6.29 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POPOP - A Simple Modal for You!</title>
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Roboto:200|Fredoka+One&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/bulma.css">
<link rel="stylesheet" href="css/popop.css">
<link rel="stylesheet" href="css/main.css">
<!-- JS -->
<script defer src="js/popop.js"></script>
</head>
<body>
<!-- MODAL - INTRO -->
<div class="popop-modal" onkeypress="closeModalKeypress()" tabindex="0" id="intro">
<div class="popop-fixed close-btn-container">
<button class="popop-close-btn button close-btn">Close</button>
</div>
<div class="popop-content">
<h3 class="title is-3">Intro</h2>
<p class="content">
<span class="popop-label">POPOP</span> is a Vanilla JS, bare-bones modal framework, boasting the use of only two files, 3 required classes, and less than 80 lines of JS! (Including the comments!)
</p>
<hr />
<h3 class="title is-3">Get Started!</h3>
<section class="section">
<h4 class="title is-4">Download</h4>
<ul>
<li>• <a href="https://raw.githubusercontent.com/catcarbonell/popop/master/downloads/popop.css" target="_blank" class="popop-label">POPOP.CSS</a></li>
<li>• <a href="https://raw.githubusercontent.com/catcarbonell/popop/master/downloads/popop.js" target="blank" class="popop-label">POPOP.JS</a></li>
</ul>
<p>Click through! It'll open a new tab for the raw code!</p>
<p>Or just right-click, 'Save Link As'</p>
</section>
<section class="section">
<h4 class="title is-4">npm/yarn</h4>
<p class="subtitle">Coming soon!</p>
</section>
<hr />
<h3 class="title is-3">About</h2>
<p class="content">
<p><span class="popop-label">POPOP</span> was inspired by my classmates and their need for a simple modal to apply to their projects! (Hi <span class="popop-label"><a href="http://generalassemb.ly" target="new">GA</a> SEI 08 ♥!</span>)</p>
<p>This site, however, is made with the assistance of <a class="bulma-style" href="http://bulma.io" text="opens a new tab!" target="_blank">Bulma</a>!</p>
<p>Check it out on <a class="popop-label" href="http://github.com/catcarbonell/popop" target="_blank">GitHub</a>!</p>
</p>
</div>
</div>
<!-- MODAL - DOCUMENTATION -->
<div class="popop-modal" id="docs">
<div class="popop-fixed close-btn-container">
<button class="popop-close-btn button close-btn">Close</button>
</div>
<div class="popop-content">
<h2 class="title is-2">Documentation</h2>
<p class="subtitle">How to use <span class="popop-label">POPOP!</span></p>
<section class="section">
<h3 class="title is-3">Important!</h3>
<p>
Your modal needs to be, at the very least,
a <code>div</code> with a class of <code>popop-modal</code> AND
it will need a unique <code>id</code>.
</p>
<p>
Your element used for opening the modal
(ex. <code>button</code>,
<code>a</code>,
<code>span</code>, etc.) needs this data tag attached as well:
<code>data-modal-id</code>. This id needs to match the id of your target modal!<br>
<p>example:</p>
<code>
< div class="popop-modal" <span class="code-highlight"> id="modal-1"</span>>A Modal! < /div> <br />
< a href="#" class="button" <span class="code-highlight"> data-modal-id="modal-1"</span>>Activate!< /a >
</code>
</p>
</section>
<section class="section">
<h3 class="title is-3">Key Classes</h3>
<p><span class="popop-label">Popop</span> is a class-based framework. Your HTML tags may get ridiculous, but it'll be worth it!</p>
<p>Check out this table:</p>
<table class="table is-hoverable">
<tbody>
<tr>
<th>Class</th>
<th>Purpose</th>
<th>Required</th>
</tr>
<tr>
<td class="code-cell"><code>.popop-modal</code></td>
<td>
The main wrapper for your modal. If you don't apply this class to your modal, POPOP will not work!!
</td>
<td>Yes</td>
</tr>
<tr>
<td class="code-cell">
<code>.popop-open-btn</code>
</td>
<td>
Apply this to the element that will OPEN your modal. Don't forget to apply <code>data-modal-id</code>!
</td>
<td>Yes</td>
</tr>
<tr>
<td class="code-cell">
<code>.popop-close-btn</code>
</td>
<td>
Apply this to the element that will CLOSE your modal. Place this within the div with the class <code>popop-modal</code>!
</td>
<td>Yes</td>
</tr>
<tr>
<td class="code-cell">
<code>.popop-content</code>
</td>
<td>
For the body/content of your modal. It'll make it scrollable!
</td>
<td>No</td>
</tr>
<tr>
<td class="code-cell"><code>.popop-fixed</code></td>
<td>
Makes the element sticky. Use this for navs, menus, and for elements to close the modal!
</td>
<td>No</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<!-- LANDING -->
<section class="container" id="index-section">
<div class="title-section">
<h1 class="title is-1">Popop!</h1>
<p class="subtitle">A very simple, customizable, vanilla JS + flexbox modal</p>
<button class="button popop-open-btn" data-modal-id="intro">Get Started!</button>
<button class="button popop-open-btn" data-modal-id="docs">Documentation!</button>
<button class="button"><a href="https://github.com/catcarbonell/popop" target="new">View on GitHub!</a></button>
</div>
<footer>
<span> Made by <a href="https://catvsco.de" target="new">@catcarbn</a> ♥</span>
</footer>
</section>
</body>
</html>