Getting started with Famous UI's modal component, be sure to read the following as our menu options have recently changed.
<html> , <body>
so that modal content
scrolls
instead.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.autofocus
HTML attribute has no effect in Famous UI's
modals.data-modal-animate="[ animteIn , animateOut ]"
, Modal Body
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
<!-- 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>
Now you can toggle modal using Famous UI's Modal Plugin.
$BCModal('#modalID').open();
$BCModal('#modalID').close();
To add modal animation adddata-modal-animate
attr and specify Animate.css animation classes,
for(Showing , Closing)
Likedata-modal-animate="rollIn , rollOut"
<!-- 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>