Integrating a fancy modal using animatedModal.js

In this recipe, we will combine the already great Bootstrap 4 card elements with the animatedModal.js jQuery plugin to create an awesome fullscreen modal with CSS3 transitions. We will use the ready-made transitions from animate.css, but we could create our own as well.

Getting ready

To get an idea of what animatedModal.js offers, navigate to its official website at http://joaopereirawd.github.io/animatedModal.js/. Also, make sure that you check out the GitHub repository at https://github.com/joaopereirawd/animatedModal.js. To reference animatedModal.js and animate.css, we will use GitCDN.xyz and cdnjs, respectively, as detailed in the following recipe.

How to do it…

1. Include animate.css inside the head tag in app/_layout.ejs:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

2. In app/recipe06-10.ejs, add the following code in between the HTML body tags:

<!--Call your modal-->
<a id="demo01...