Minimal Modal Window For Inline Content – Frappuccino Modal

Frappuccino Modal is a minimal Vanilla JavaScript plugin to create a pretty clean modal window from inline content within the document.

How to use it:

Download and import the Frappuccino Modal’s files into the document.

<link rel="stylesheet" href="./dist//frappuccino-modal.css">
<script src="./dist/frappuccino-modal.js"></script>

Add title, content and close button to the modal following the HTML structure as these:

<div class="fm-modal" id="example">
  <div class="fm-modal-container">
    <div class="fm-modal-close-btn">Close</div>
    <div class="title">Modal Title</div>
    <div class="body">Modal Body</div>
  </div>
</div>

Create a trigger button to launch the modal window. Use the data-fm-target attribute to specify the ID of the modal you’d like to create.

<button class="fm-modal-trigger" data-fm-target="#example">Open Modal</button>