Modals
Modal, pop-up box, bottom sheet, off-canvas, anything can be related to this component, we generally call it modal. There are different types of modals with different sizes and styles that come with FlatifyCSS, which we will cover with practical examples on this page.
A simple modal
To have a simple modal you need to load FlatifyCSS, JavaScript file into your page. There must an element to call the modal and open it. Here is an example:
Open modal button
The button that opens modal on click, must have two things to work: first .open-modal class and data-modal-target HTML attribute which should select modal by its special address it can be a class or an ID (in this case .my-modal is the custom class we will set to our modal).
<button class="button open-modal" data-modal-target=".my-modal">Display The Modal</button>
Connection between modal and button
As said above we have a custom class called .my-modal, we should add it to the .modal element, now they are connected it means by clicking the open button modal will be shown.
<div class="modal my-modal" tabindex="-1" aria-labelledby="my-modal-title">...</div>
Accessibility
There are some other attributes that are set and will be set dynamically for the sake of accessibility, there is an attribute called aria-labelledby you can read about its use-cases. Simply, it describes modal with the title (in this example <h5>) because it has the ID of modal title, so they are connected like form label for attribute.
Note that modals are keyboard friendly, since pressing ESC will hide active modals.
Close button
To create a button that closes modal, you can use close button component. There are two ways to make the connection between the modal and close button:
- Close button should be children of modal, in other words it should be inside
.modal.or
- Close button should have
data-modal-targetHTML attribute which specifies modal by its selector, like the open modal button.
<button type="button" class="close-modal close-button" data-modal-target=".my-modal" aria-label="Close"></button>
Modal parts
Modals can have their custom HTML, however by default there is a predefined structure with basic styles that make it look like a floating message, as shown in the example below they are wrapped by the .modal-content class. Inside it header, footer, and main contents are placed.
<div class="modal my-modal" tabindex="-1" aria-labelledby="my-modal-title">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="my-modal-title">Here is an example</h5>
<button type="button" class="close-modal close-button" data-modal-target=".my-modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button class="button size-sm style-danger close-modal">Close</button>
<button class="button size-sm style-info close-modal">Confirm</button>
</div>
</div>
</div>
The final modal will be like this:
<button class="button open-modal" data-modal-target=".my-modal">Display The Modal</button>
<div class="modal my-modal" tabindex="-1" aria-labelledby="my-modal-title">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="my-modal-title">Here is an example</h5>
<button type="button" class="close-modal close-button" data-modal-target=".my-modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button class="button size-sm style-danger close-modal">Close</button>
<button class="button size-sm style-info close-modal">Confirm</button>
</div>
</div>
</div>
Required action
By default if users click outside of the modal, aka "backdrop", the modal will be closed, however, if you add .required class to the .modal element it will not treat this way anymore, in other words, the modal will be closed only when user click related .close-button.
<div class="modal my-modal required" aria-labelledby="my-modal-title">...</div>
Positions
A modal can be centered or stick to top, bottom, right or left. While it is stuck at sides, its animation will be diffrent as well.
These are classes that can be added to the .modal element, easy-peasy.
modal-center
modal-top
modal-botton
modal-left
modal-right
Width & height setters
You can use width & height setter helper classes, they come in handy when you need to fill the height for the left and right sides.
<div class="modal modal-center">...</div>
<div class="modal modal-top">...</div>
<div class="modal modal-bottom">...</div>
<div class="modal modal-left">...</div>
<div class="modal modal-right">...</div>
Bordered
To have modal with borders add .bordered class to the .modal element.
<div class="modal bordered">...</div>
Sizes
To change the button size use size setter classes. Modals also support two special classes .modal-lg and .modal-sm, these classes specially modify max-width besides font size.
<div class="modal modal-sm"></div>
<div class="modal"></div>
<div class="modal modal-lg"></div>
<div class="modal size-3x"></div>
Colors
There are helper classes for styling elements like modal, first read about color setter classes then check examples below you can add them to .modal class.
<!-- Buttons -->
<button class="button open-modal style-red" data-modal-target=".my-modal-red">Red modal</button>
<button class="button open-modal style-red-light" data-modal-target=".my-modal-red-light">Light Red modal</button>
<button class="button open-modal style-blue" data-modal-target=".my-modal-blue">Blue modal</button>
<button class="button open-modal style-dark" data-modal-target=".my-modal-dark">Dark modal</button>
<!-- Modals -->
<div class="modal style-red bordered my-modal-red">...</div>
<div class="modal style-red-light bordered my-modal-red-light">...</div>
<div class="modal style-blue bordered my-modal-blue">...</div>
<div class="modal style-dark bordered my-modal-dark">...</div>
Customization
Instead of using color setter classes you can customize it with predefined CSS variables, These are all of them:
--flatify__modal-bg-color
--flatify__modal-txt-color
--flatify__modal-border-color
--flatify__modal-animation-show-duration
--flatify__modal-animation-hide-duration
Modal backdrop color
There is also a CSS variable called --flatify__modal-backdrop-color, it just changes the color of the modal backdrop. The important thing is that, it is not inside modal, it is a global element at the first level of body children, so you must set its custom color to the :root, html or body.
For more info about checkout the backdrop component customization
body {
--flatify__modal-backdrop-color: #8e8271;
}
.my-modal {
--flatify__modal-bg-color: #aa8e69;
--flatify__modal-txt-color: #f5f7fa;
--flatify__modal-border-color: #ffce54;
}