Simple modal element with vanilla js and animation effects


Simple modal element with vanilla js and animation effects Tutorial by Mirko Zovko | 12. Jul. 2020.

Welcome to one more tutorial in series of creating simple elements with vanilla js.

In this tutorial I’ll show you how to create simple modal (popup) elements with different sizes and show animation effects.

What we need to do first is create html structure for our simple modal element:

  • btn-modal - is a button class that is used for opening specific modal, you also have to add data-id of modal you want to open. data-id contain id of modal
  • modal - it’s a main container of a modal, and also dark modal background which is by default used to close modal by clicking on it. adding class do-not-close you are preventing that close event. You already know that modal is by default hidden, so adding active class becomes visible.
  • m-container - holds visible part of the modal, from title, content to footer of modal. It is also used for modal animations and sizes. For different animations and sizes you need to use different classes that I predefined in css. Those class are:
    • without class effect of modal showing will be fade in fade out and have 500px max width
    • slide-from-top - modal slides from top
    • slide-from-bottom - modal slides from bottom
    • slide-from-right - modal slides from right
    • slide-from-left - modal slides from left
    • boucle - bounce effect with cubic-bezier animation
    • sm-modal - max width of modal 300px
    • l-modal - max width of modal 800px
    • xl-modal - max width of modal 80% of modal background
    • full-modal - max width of modal 100% of modal background
  • m-title - is modal title, I added a small style on it, but you can you can easily change is in your wanted style
  • m-close - is small circle button that is in absolute position on m-container and it’s used for closing a modal
  • m-content- is a container that holds modal content. You can add here html elements of any kind. Content height will be bigger automatically with more content in it.
  • m-footer - this is optional container, I put it there to be used for modal footer buttons, because it's easier to use it like that, and button can be one next to each other, but you can use here also different styles, of remove this part totally
  • btn - I also created 3 simple buttons, red, blue and dark just for modal demo
  • close-modal - that is a class that is used as a custom button for closing the modal, it closes only specific modal and you have to add data-id of that modal in it.

CSS for simple modal is a bit bigger than for accordion and tabs so I wont show it here, but you can check it on jsFiddle. It’s commented but if you have any questions about it just write in comment.

Vanilla js is divided in 4 functions for simple modal to make it all work.

First function is for opening modal. It’s looking for elements with btn-modal class and checking custom data attribute data-id to find the right modal with that id to open.

Other three functions are used for different ways to close the modal. You can close the modal by clicking on the modal dark background. Also if you add on modal class another class don-not-close, then modal won't be able to close like that. Standard close button in the right top corner of the modal, and custom button for closing modal with class m-close and data-id of the modal you want to be close with that button.

Full working code you can check on jsFiddle or on Codepen.

I hope you liked this article. If you have some suggestion or idea feel free to write in comment section bellow. Enjoy! :)