Create Customizable Rich Text Popups with Popup.js

A lightweight JavaScript library for generating highly customizable popups and modals in your web projects.

It offers a lot of configuration options which can be used to configure a myriad of attributes, from colors and margins to font sizes and button dimensions, essentially manipulating every aspect of your popup.

How to use it:

1. Download and load the required files in the document.

<link rel="stylesheet" href="popup.css" />
<script src="popup.js"></script>

2. Create a new popup instance and define the content displayed in the popup.

const myPopup = new Popup({
      id: "unique-id",
      title: "Popup Title",
      content: `
      Popup Content Here`,
});

3. Show the popup window when needed.

myPopup.show();

4. Content styling.

const myPopup = new Popup({
      id: "unique-id",
      title: "Popup Title",
      content: `
      A {a-https://www.cssscript.com}[Link]
      This sentence           has a large gap.
      {red}[This text is red.]
      This is a {btn-blue-button}[Blue Button].
      This part of the text will have {custom-style}[custom styling].
      space-out§Color Scheme{btn-colorSchemeButton}[Toggle]
      space-out§Clear Storage{btn-clearStorageButton red-button}[Clear]`,
});

5. All possible options to customize the popup.

id: "popup",
title: "Popup Title",
content: "Popup Content",
titleColor: "#000000",
backgroundColor: "#ffffff",
closeColor: "#000000",
textColor: "#000000",
linkColor: "#383838",
widthMultiplier: 1,
heightMultiplier: 0.66,
fontSizeMultiplier: 1,
borderRadius: "15px",
sideMargin: "3%",
titleMargin: "2%",
lineSpacing: "auto",
showImmediately: false,
showOnce: false,
fixedHeight: false,
allowClose: true,
underlineLinks: false,
fadeTime: "0.3s",
buttonWidth: "fit-content",
borderWidth: "0",
borderColor: "#000000",
disableScroll: true,
textShadow: "none",
hideCloseButton: false,
hideTitle: false,
css: null, // additional CSS styles
loadCallback: null,
hideCallback: null,

Changelog:

v1.4.3 (03/23/2024)

• Fixed popup height not working properly on iOS
• Decreased popup title and body font size on mobile