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

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

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

To close modal

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

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content