Look how fucking clean this modal is!

You don't even need any bullshit classes to make it work. No jQuery too. And guess what. Adding modals and triggers dynamically would still work flawlessly without binding and listening to some crappy events.

Wanna know something more? It's less than fucking 2KB and needs no CSS. It's just a fucking event listener attached to the document object.

Well...

Assuming you've included Modalite in your page, you can just add a few HTML attributes and that's it. No CSS involved. You are only provided with a modal-visible class that you can use to stylize the modal when visible, assuming your default styles define its hidden state.

When a click inside the document occurs, the clicked element is checked for 3 attributes:

• data-open-modal should possess the value of a modal's id. If an element with the given id is found, it receives the modal-visible class.
• data-close-modal means the clicked element's parent tree is searched for an element with a data-modal attribute. If an element is found, the modal-visible class is removed from it.
• data-modal is used to indicate what's a modal. If the clicked element has it, it means it's a modal and should be closed, as this is expected modal behaviour. The modal-visible class will be removed from it.

You serious?

No.

OK,

You could use the Modalite modal template and CSS if you ain't got time fo that, it takes responsiveness into consideration too. If you're not interested in that, here's a step by step guide on what's needed to craft a modal:

1. Add an element with the data-modal attribute and give it an id. Style it so that it's hidden. You can use the visibility CSS property. It's good for the job, because it's affected by transitions and makes animations a whole lot easier. Add another rule-set for when the element has the modal-visible class. This should define its visible behaviour.
2. Add an element with the data-open-modal attribute and set its value to equal the previously created modal's id. When clicked, this will add the modal-visible class to the targeted modal and show it.
3. Eyyy, it's working.
4. Optionally, you can add a close button for the modal. By default, it will be closed when its background is clicked, as this is expected modal behaviour. To add a close functionality, simply add any element inside the modal and give it the data-close-modal attribute.