/frappuccino-modal

🍦 Frappuccino Modal is a simple modal blended with vanilla js and other various css ingredients

Primary LanguageJavaScript

Artboard

Description

Frappuccino Modal is a simple modal blended with vanilla js and other various css ingredient, ussally topped with custom css and additional js.

  • No dependencies required
  • Light-weight '''(about 1k minified)'''
  • Simple markup makes it easy to style
  • Fully customizable via CSS

Installation

The simplest method is to use the hosted version from jsDelivr:

CSS

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dbrownjave/frappuccino-modal/src/frappuccino-modal.min.css">

JS

  <script src="https://cdn.jsdelivr.net/gh/dbrownjave/frappuccino-modal/src/frappuccino-modal.min.js"></script>

Usage

<!-- Modal -->
<div class="fm-modal" id="modalOne">
  <div class="fm-modal-container">
    <div class="fm-modal-close-btn">close</div>
    <div class="title">Modal Title</div>
    <div class="body">Hello, this is the modal message</div>
  </div>
</div>

<!-- Trigger Action Button -->
<button class="fm-modal-trigger" data-fm-target="#modalOne">Open Modal One</button>

Anatomy

Modal

Artboard

Trigger Button

Artboard

Browser support

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Sponsors

If you are interested in becoming a sponsor, please feel free to contact us!

License

card

© 2019 Magical X Labs
Released under the MIT LICENSE