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 attribute data-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 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="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>