modals
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
Regular Modal Snippet
<!-- 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 for toggling modal
Now you can toggle modal using Butter Cake's Modal Plugin.
To open modal
$('#modalID').BCModal().open();
To close modal
$('#modalID').BCModal().close();
Modal Animations
To add modal animation adddata-modal-animate
attr and specify Animate.css animation classes,
for(Showing , Closing)
Likedata-modal-animate="rollIn , rollOut"
Modal With Animation Snippet
<!-- 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>
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?
Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!