Create Simple Inline Modals With The Smallbox JavaScript Plugin

Smallbox is a lightweight JavaScript plugin that creates a modal popup to display inline content on top of the page.

Once set up, the target content is displayed in a modal window when the user clicks the trigger element. This is great for creating responsive popups, notifications, prompts, and more without reloading the entire page.

How to use it:

1. Include the Smallbox’s JavaScript and CSS in the document.

<link rel="stylesheet" href="/dist/smallbox.min.css" />
<script src="/dist/smallbox.min.js"></script>

2. Create a trigger element (like a button) to launch the modal popup.

<button class="open">
  Launch The Modal
</button>

3. Initialize the Smallbox plugin.

var smallbox = new SmallBox();

4. Enable the trigger element to display the content (#mycontent) in the modal popup.

<div id="mycontent">
  ...
</div>

smallbox.add("#mycontent", ".open");

Changelog:

v0.2.0 (08/29/2023)

• Bugfix