Getting started with Famous UI's modal component, be sure to read the following as our menu
options have recently changed.
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the
document and
remove scroll from the <html> , <body> so that modal content
scrolls
instead.
Clicking on the modal “backdrop” will automatically close the modal.
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 .modal
within another fixed element.
Famous UI supports animation on showing and closing, can add animation using data attribute
data-modal-animate="[ animteIn , animateOut ]", Famous UI supports Animate.css but you can try your own custom animations, Not Tested Yet!!
Basic Modal
Modal Header
Modal Body
Modal options
To open a modal add .modal-open class and data-modal="ModalID"
attribute to a button
To Close a modal add .modal-close class and data-modal="ModalID"
attribute to a button
Regular Modal Snippet
Js for toggling modal
Now you can toggle modal using Famous UI's Modal Plugin.
To open modal
To close modal
Modal Animations
To add modal animation add data-modal-animate
attr and specify
Animate.css animation
classes, for (Showing , Closing) Like
data-modal-animate="rollIn , rollOut"
Modal With Animation Snippet
Modal With Animation
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad obcaecati perspiciatis a labore, esse quod,
quasi fugit consequatur, sint reprehenderit enim suscipit veritatis praesentium laboriosam quo provident
ex odit sunt?
Modal With Animation
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad obcaecati perspiciatis a labore, esse quod, quasi fugit consequatur, sint reprehenderit enim suscipit veritatis praesentium laboriosam quo provident ex odit sunt?