POPOP 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!)
Click through! It'll open a new tab for the raw code!
Or just right-click, 'Save Link As'
Coming soon!
POPOP was inspired by my classmates and their need for a simple modal to apply to their projects! (Hi GA SEI 08 ♥!)
This site, however, is made with the assistance of Bulma!
Check it out on GitHub!
How to use POPOP!
Your modal needs to be, at the very least,
a div with a class of popop-modal AND
it will need a unique id.
Your element used for opening the modal
(ex. button,
a,
span, etc.) needs this data tag attached as well:
data-modal-id. This id needs to match the id of your target modal!
example:
< div class="popop-modal" id="modal-1">A Modal! < /div>
< a href="#" class="button" data-modal-id="modal-1">Activate!< /a >
Popop is a class-based framework. Your HTML tags may get ridiculous, but it'll be worth it!
Check out this table:
| Class | Purpose | Required |
|---|---|---|
.popop-modal |
The main wrapper for your modal. If you don't apply this class to your modal, POPOP will not work!! | Yes |
.popop-open-btn
|
Apply this to the element that will OPEN your modal. Don't forget to apply data-modal-id!
|
Yes |
.popop-close-btn
|
Apply this to the element that will CLOSE your modal. Place this within the div with the class popop-modal!
|
Yes |
.popop-content
|
For the body/content of your modal. It'll make it scrollable! | No |
.popop-fixed |
Makes the element sticky. Use this for navs, menus, and for elements to close the modal! | No |
A very simple, customizable, vanilla JS + flexbox modal