Small & Customizable Modal Dialog JavaScript Library – Nano Modal

Nano Modal is a small JS library used to create responsive and mobile compatible modal & dialog boxes that are fully customizable via CSS & JavaScript.

Default Usage:

Load the Nano Modal JS library in your document.

<script src="nanomodal.js"></script>

Create a button to trigger a modal box.

<button onclick="openModal1()">Open Modal 1</button>

Display a modal box with a close button.

var modal1 = nanoModal("Test Content");

Expose open function.

window.openModal1 = modal1.show;

Available options.

// var customModal = nanoModal(MESSAGE, OPTIONS);
var customModal = nanoModal("hey", { 
// A string of space separated classes you want on the main modal container
classes: "",
// An array of objects (button definitions) to set the buttons on the bottom of this modal.
buttons: [],
// Make the modal automatically call remove() on itself after it hides.
autoRemove: false,
// Allow a click on the background overlay to close the modal
overlayClose: true
});