Minimal Beginner-friendly Modal Dialog Library – jspopup

Category: Javascript , Modal & Popup | March 18, 2024
Author:pradeepkumarverma1
Views Total:43 views
Official Page:Go to website
Last Update:March 18, 2024
License:MIT

Preview:

Minimal Beginner-friendly Modal Dialog Library – jspopup

Description:

Yet another popup library that makes it easier to create minimal, clean, modal-style, confirm/alert dialog boxes on the page.

Unlike other popup box libraries, jspopup keeps things simple. You can customize everything from the message to the action buttons and overall look directly through JavaScript.

How to use it:

1. Download & unzip the package, and load the popup.js script in the document.

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

2. Create a new popup instance and define the popup title & message as follows:

popup({
  title: "Are you sure to remove to trash?",
  message: "Your post will be removed to trash. You can recover from there.",
});

3. Trigger a custom function when the confirm button has been clicked.

popup({
  title: "Are you sure to remove to trash?",
  message: "Your post will be removed to trash. You can recover from there.",
},
  () => {
    alert("Removed!");
  }
);

4. Override the default styles of the popup in the popup.js.

// Popup container that will work as an overlay
const popupContainer = document.createElement('div');
popupContainer.setAttribute('id', 'jsPopupContainer');
popupContainer.style.background = 'rgba(0,0,0,0.5)';
popupContainer.style.position = 'fixed';
popupContainer.style.height = '100vh';
popupContainer.style.width = '100%';
popupContainer.style.zIndex = '999';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
// The main Popup
const popup = document.createElement('div');
popup.setAttribute('id', 'jsPopup');
popup.style.background = '#ffffff';
popup.style.width = '500px';
popup.style.maxWidth = '90%';
popup.style.borderRadius = '5px';
popup.style.left = '50%';
popup.style.top = '30%';
popup.style.transform = 'translate(-50%)';
popup.style.position = 'absolute';
// The Popup title area
const popupTitle = document.createElement('div');
popupTitle.setAttribute('id', 'popupTitle');
popupTitle.style.padding = '10px';
popupTitle.style.background = '#f3f3f3';
popupTitle.style.borderRadius = '10px 10px 0px 0px';
popupTitle.style.fontWeight = 'bold';
popupTitle.innerHTML = args.title || "heading";
// The popup message area
const popupMessage = document.createElement('div');
popupMessage.setAttribute('id', 'popupMessage');
popupMessage.style.padding = '10px';
popupMessage.innerHTML = args.message || "custom message";

// The Actions area that will contain the action buttons
const actions = document.createElement('div');
actions.style.display = 'flex';
actions.style.gap = '10px';
actions.style.margin = '10px 10px';
actions.style.justifyContent = 'end';
// The postive action button
const positiveButton = document.createElement('button');
positiveButton.setAttribute('id', 'positiveButton');
positiveButton.style.background = args?.positiveButton?.background || 'green';
positiveButton.style.border = 'none';
positiveButton.style.borderRadius = '5px';
positiveButton.style.cursor = 'pointer';
positiveButton.style.color = args?.positiveButton?.color || '#ffffff';
positiveButton.style.padding = '10px';
positiveButton.innerHTML = args?.positiveButton?.text || 'Continue';
positiveButton.style.boxShadow = '4px 8px 10px 0px #b9b9b9';

You Might Be Interested In:


Leave a Reply