Intro

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!)


Get Started!

Download

Click through! It'll open a new tab for the raw code!

Or just right-click, 'Save Link As'

npm/yarn

Coming soon!


About

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!

Documentation

How to use POPOP!

Important!

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 >

Key Classes

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

Popop!

A very simple, customizable, vanilla JS + flexbox modal