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

Category: Javascript , Modal & Popup , Notification | October 27, 2018
Author: robholden
Views Total: 1,670
Official Page: Go to website
Last Update: October 27, 2018
License: MIT

Preview:

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

Description:

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
$ 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');

With options.

var pb = new PromptBoxes({

    // top or bottom
    toastDir: 'top', 

    // max number of toasts to display
    toastMax: 5,

    // auto dismiess after 5 seconds
    // 0 = never
    toastDuration: 5000,

    // is dissmissable
    toastClose: false,

    // shows prompt as position absolute
    promptAsAbsolute: true, 

    // animation speed
    animationSpeed: 500
    
});

Create toast-like alert dialog boxes with various themes:

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

Create a confirmation dialog box with callbacks.

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

Create a prompt dialog box.

pb.prompt(
  (value) => alert(`You have: ${ value ? `entered ${ value }` : 'cancelled' }`), // Callback
  'Your User Name',  // Prompt text
  'text',  // Input type, or 'textarea'
  'A defult value', // Default value
  '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;

Changelog:

10/27/2018

  • Added textarea and default value support for prompts

09/20/2018

  • HTML is now allowed in toast messages

07/13/2018

  • Fixed timebar bug

07/10/2018

  • Toasts will now fall down the stack when manually closing

05/30/2018

  • Add duration and closed option to toasts
  • Fixed styles

05/24/2018

  • Fixed issue when clearing elements removed new occurrences

You Might Be Interested In:

One thought on “Pretty Non-blocking Dialog Popup JavaScript Plugin – Prompt-Boxes

  1. ensayofr

    There are problems when entering the duration. Also you should post this project into github or somewhere else where we can report problems or bugs.

    Reply

Leave a Reply