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'
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,
div with a class of
it will need a unique
Your element used for opening the modal
span, etc.) needs this data tag attached as well:
data-modal-id. This id needs to match the id of your target modal!
< 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:
||The main wrapper for your modal. If you don't apply this class to your modal, POPOP will not work!!||Yes|
Apply this to the element that will OPEN your modal. Don't forget to apply
Apply this to the element that will CLOSE your modal. Place this within the div with the class
||For the body/content of your modal. It'll make it scrollable!||No|
||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