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 <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Butter supports multiple modal windows at a time. not tested on mobile
  • 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.

Basic Modal

Modal Header

Modal Body

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

Basic Modal Snippet
<div class="modal" id="modalID">
    <div class="modal-container modal-sm">
        <div class="modal-header">
            <h5 class="modal-title">Modal Header</h5>
            <div class="modal-close" data-modal="modalID"><i class="fa fa-close"></i></div>
        </div>

        <div class="modal-body">
            <p>Modal Body</p>
        </div>

        <div class="modal-footer">
            <button class="modal-close btn-gray" data-modal="modalID">Close</button>
            <button class="btn-primary" data-modal="modalID">Save</button>
        </div>
    </div>
</div>

Mutiple Modal



Mutiple Modal Snippet
<!-- MODAL ONE -->
<div class="modal" id="modal1">
    <div class="modal-container modal-sm">
        <!-- header -->
        <div class="modal-header bg-secondary">
            <h5 class="modal-title text-white">First modal</h5>
            <div class="modal-close" data-modal="modal1"><i class="fa fa-close"></i></div>
        </div>

        <div class="modal-body">
            <a href="#!" class="btn-primary modal-open" data-modal="modal2">Open Second Modal</a>
        </div>
    </div>
</div>

<!-- MODAL TWO -->
<div class="modal" id="modal2">
    <div class="modal-container modal-sm">
        <!-- header -->
        <div class="modal-header bg-secondary">
            <h5 class="modal-title text-white">Second Modal</h5>
            <div class="modal-close" data-modal="modal2"><i class="fa fa-close"></i></div>
        </div>

        <div class="modal-body">
            <a href="#!" class="btn-primary modal-open" data-modal="modal3">Modal Three</a>
        </div>
    </div>
</div>

<!-- MODAL THREE -->
<div class="modal" id="modal3">
    <div class="modal-container modal-sm">
        <!-- header -->
        <div class="modal-header bg-secondary">
            <h5 class="modal-title text-white">Third Modal</h5>
            <div class="modal-close" data-modal="modal3"><i class="fa fa-close"></i></div>
        </div>

        <div class="modal-body">
            <a href="#!" class="btn-primary modal-close" data-modal="modal3">Modal Close</a>
        </div>
    </div>
</div>