Famous UI | Modals

How it Works

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.
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Famous UI's modals.
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 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

<!-- MODAL OPEN BUTTON -->
			<button class="fui-btn fui-btn-primary modal-open" data-modal="modal">Regular Modal</button>

			<!-- MODAL -->
			<div class="fui-modal" id="modal">
			<div class="fui-modal-container">
					<!-- header -->
					<div class="fui-modal-header">
							<h5 class="fui-modal-title">Modal With Animation</h5>
							<div class="modal-close" data-modal="modal"><i class="fa fa-close"></i></div>
					</div>

					<div class="fui-modal-body">
							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?
					</div>

					<div class="fui-modal-footer">
							<button class="modal-close fui-btn fui-btn-gray" data-modal="modal">Close</button>
							<button class="fui-btn fui-btn-primary">Save</button>
					</div>

			</div>
			</div>

Js for toggling modal

Now you can toggle modal using Famous UI's Modal Plugin.

To open modal

$BCModal('#modalID').open();

To close modal

$BCModal('#modalID').close();

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 OPEN BUTTON -->
			<button class="fui-btn fui-btn-primary modal-open" data-modal="modalWithAnime">Modal With Animation</button>

			<!-- MODAL -->
			<div class="fui-modal" id="modalWithAnime">
			<div class="fui-modal-container" data-modal-animate="rollIn , rollOut">
					<!-- header -->
					<div class="fui-modal-header">
							<h5 class="fui-modal-title">Modal With Animation</h5>
							<div class="modal-close" data-modal="modalWithAnime"><i class="fa fa-close"></i></div>
					</div>

					<div class="fui-modal-body">
							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?
					</div>

					<div class="fui-modal-footer">
							<button class="modal-close fui-btn fui-btn-gray" data-modal="modalWithAnime">Close</button>
							<button class="fui-btn fui-btn-primary">Save</button>
					</div>

			</div>
			</div>

Modals