text

Engram Popup Library

A lightweight and easy-to-use modal/popup library for web projects.

Installation

Install the package via npm:

npm i engram-popup

Usage

1. Import the library In your main JavaScript/TypeScript file:

// Import styles
import 'engram-popup/dist/index.css';

// Import JavaScript functionality
import { popup } from 'engram-popup';

//call popup function
popup();

2. Create a popup Add a div element with the data-engram-popup attribute to your HTML:

<div class="your-popup-class" data-engram-popup="unique-popup-name"></div>

Important notes:

Use a unique value for the data-engram-popup attribute (e.g., login-popup, contact-form)

Avoid creating multiple popups with the same attribute value as this may cause conflicts

Add your own CSS class (like your-popup-class) to style the popup (dimensions, background, etc.)

3. Create a trigger button Add a button (or any other element) with the data-engram-button attribute:

<button data-engram-button="unique-popup-name">Open Popup</button>

The value of data-engram-button must match the value of the corresponding data-engram-popup attribute.

Complete Example

<!-- Trigger button -->
<button data-engram-button="test-popup">Open Modal</button>

<!-- Popup element -->
<div class="custom-popup-style" data-engram-popup="test-popup">
  <h2>Popup Content</h2>
  <p>This is your custom popup content.</p>
</div>

Add your own CSS classes to customize the appearance of your popups:

.custom-popup-style {
  width: 400px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  /* Add your custom styles here */
}

Notes You can add as many popups as needed on a single page

Each popup should have a unique data-engram-popup value

The trigger element and popup element are linked through matching attribute values