Pretty Non-blocking Dialog Popup JavaScript Plugin – Prompt-Boxes

Category: Javascript , Modal & Popup , Notification | February 19, 2018
Author: robholden
Views Total: 104
Official Page: Go to website
Last Update: February 19, 2018
License: MIT


Pretty Non-blocking Dialog Popup JavaScript Plugin – Prompt-Boxes


The Prompt-Boxes JavaScript plugin used to create nice, clean alert/confirm/prompt dialog boxes and toast-like notification popups on your web app. Written in ES6/SCSS.

How to use it:

Download & install the Prompt-Boxes with NPM:

$ npm install prompt-boxes --save

Import the Prompt-Boxes into your module.

// ES 6
import pb from 'prompt-boxes';

// CommonJS:
const pb = require('prompt-boxes');

Create toast-like alert dialog boxes with various themes:

pb.success('Success toast');
pb.error('Error toast');'Info toast');

Create a confirmation dialog box with callbacks.

  (outcome) => alert(`You have: ${ outcome ? 'confirmed' : 'cancelled' }`), // Callback
  'Are you sure?', // confirm text
  'Yes', // Confirm text
  'No' // Cancel text

Create a prompt dialog box.

  (value) => alert(`You have: ${ value ? `entered ${ value }` : 'cancelled' }`), // Callback
  'Your User Name',  // Prompt text
  'text',  // Input type
  'Submit',  // Submit text
  'Cancel'  // Cancel text

To customize the dialog styles, just override the Variables in the SCSS as these:

$white: #FFF;
$black: #252525;

$light-grey: #EEE;
$grey: #CCC;
$dark-grey: #999;
$light-blue: #79bde6;
$blue: #4591bf;
$dark-blue: #366988;

$light-red: #ff7575;
$red: #da4242;
$dark-red: #af3535;

$light-green: #6ed06c;
$green: #51cc50;
$dark-green: #409c3f;

$br: 2px;

Leave a Reply