Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

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

You can toggle .modal-show class on .modal to show and hide modal

        <!-- 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 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>
        

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon