Use this Cactu's component to dialogs, notification, or for what you consider necessary.
How it works
Please read the next considerations for our modal components:
- Modals are built just with HTML amd CSS. They’re positioned over everything else in the document and remove scroll from the
<html>so that modal content scrolls instead.
- Only supports one modal window at a time.
- Modals use
position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a
modalwithin another fixed element.
- To show the modal, you neeed to add the
activeclass to the
modal-verticalclass and add the
clippedclass to the
- Use the
closeclass like a trigger to hide the modal.
- To hide the modal with the “backdrop”, add the
modalclass like a trigger to hide the modal, but be carefull with the
modal-contentclass, for this, add a
- You can use the modal launchers of any ways that you want. For example:
- Set a
<button>tag adding the
modal-launcherclass and add a
- Add the same ID set on
data-targetof the launcher like the ID of modal component.
- With you JS library or framework prefered, identify the launcher clicked to add the
activeclass on the necesary
- Set a
Simple modal example
Modal card example
Modal centered example
To get a modal vertically centered, you just add
-center class to the