By default, bootstrap modals will appear in the center of the screen with a slight animation from top-down. However, depending on your UI or overall design, you may want to have modals flyout from the sides.
Since we're using Bootstrap, first we need to include the Boostrap files in our project. Copy and paste the Bootstrap CDN code below in your project's HTML file:
Bootstrap Modal Structure
Bootstrap modals have standard components inside a div component with a classname of
- The modal header: Includes the modal title.
- The modal body: The main modal content goes over here.
- The modal footer: Includes the "Close" and "Save Changes" buttons by default. You can edit and customize these buttons.
Below is a basic Bootstrap modal structure:
In order to trigger the modals, a button or a link is needed:
So basically, creating a modal requires two elements: A button to trigger the modal and the modal component. Here's the complete code for our example modal. Inside the modal we have a filler title and a sample paragraph content. Copy the code below, paste it in your HTML file and customize the modal content as you'd like:
Once we're done building the HTML structure of the modal, it is time to actually make it slide from the sideways. We'll do this by using the CSS
@keyframes rule. In CSS, the @keyframes rule is used to create animations. It allows an element to gradually change by setting keyframes or waypoints along the animation sequence. Just like CSS gradients, it has a start and an end point such as
100%. The @keyframes rule is immediately followed by an identifier; this identifier binds the animation to that element. We're making the modal slide in from the right side so for convenience purposes, we named the identifier
fadeInRight and set the
animation-name property to
fadeInRight as well:
Next, we put the
fadeInRight identifier right after the
@keyframes rule and set the from and to values. Initially, we set the
opacity of the modal to
0% since it will be transformed from invisible status to visible. Then we use the translate3d property to set the initial positioning the modal. The syntax for the
translate3d() property is as follows:
translate3d(tx, ty, tz) with
z corresponding to X,Y,Z axes.
Since the modal will show up from the right side, initially the right-side position should be 0 and then move gradually towards the end of its container. This means it will only move horizontally (on the x-axis) so we'll set the initial positioning as (0,0,0) and the end positioning as (%100,0,0).
Finally, we'll set a duration for the animation to make the transition smooth. In the HTML section, we added an .animated class to the modal container. We select this classname in our CSS file and set the animation duration to 0.5s. The higher this number, the longer time the animation will take to complete.
Our modal is now sliding from the right instead of top. Remember we mentioned going a step further and making the modal function like a side navigation menu? There is a simple trick to accomplish this: by removing the dark modal background overlay. Whenever a modal opens, Bootstrap automatically inserts a dark background overlay with a classname of
.modal-backdrop. We can remove this dark overlay by setting its
transparent. Below is the difference between dark overlay vs transparent overlay:
And there it is. Click on the "Launch Modal" button on the JSFiddle example below to see how it works before committing to its use: