Modal
How it Works
Getting started with Butter Cake'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 Butter Cake's modals. - Butter Cake supports animation on showing and closing, can add animation using
data attributedata-modal-animate="[ animteIn , animateOut ]"
,
Butter Cake supports Animate.css but you can try your own custom animations, Not Tested Yet!!
Basic Modal
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
You can toggle.modal-show
class on.modal
to show and hide modal
Basic Modal
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 OPEN BUTTON -->
<button class="btn primary modal-open" data-modal="modal">Regular Modal</button>
<!-- MODAL -->
<div class="modal" id="modal">
<div class="modal-container">
<!-- header -->
<div class="modal-header">
<h5 class="modal-title">Modal With Animation</h5>
<div class="modal-close" data-modal="modal">
<i class="fa fa-close"></i>
</div>
</div>
<div class="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="modal-footer">
<button class="modal-close btn gray" data-modal="modal">Close</button>
<button class="btn primary">Save</button>
</div>
</div>
</div>
Js
Now you can toggle modal using Butter Cake's Modal Plugin.
// To open modal
$('#modalID').BCModal().open();
// To close modal
$('#modalID').BCModal().open();
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
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 OPEN BUTTON -->
<button class="btn primary modal-open" data-modal="modalWithAnime">Modal With Animation</button>
<!-- MODAL -->
<div class="modal" id="modalWithAnime">
<div class="modal-container" data-modal-animate="rollIn , rollOut">
<!-- header -->
<div class="modal-header">
<h5 class="modal-title">Modal With Animation</h5>
<div class="modal-close" data-modal="modalWithAnime">
<i class="fa fa-close"></i>
</div>
</div>
<div class="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="modal-footer">
<button class="modal-close btn gray" data-modal="modalWithAnime">Close</button>
<button class="btn primary">Save</button>
</div>
</div>
</div>
Contact us
Report Bug
Request Feature
Submit Work