Elegant Popup Box (Alert, Confirm, Prompt) In JavaScript – QuantumAlert

Category: Javascript , Modal & Popup , Recommended | August 27, 2020
Author:CosmogicOfficial
Views Total:2,076 views
Official Page:Go to website
Last Update:August 27, 2020
License:MIT

Preview:

Elegant Popup Box (Alert, Confirm, Prompt) In JavaScript – QuantumAlert

Description:

QuantumAlert is a simple-to-use JavaScript library for creating elegant, customizable dialog boxes to replace the browser alert, confirm, and prompt popup boxes.

Features:

  • CSS3 powered open/close animations.
  • 3 built-in themes: Light, Dark, Dark Blue.
  • 4 dialog types: success, error, warning, and info.
  • Custom dialog icon.

How to use it:

1. Download the library and insert the QuantumAlert’s files into the HTML.

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

2. Create alert dialog boxes with different themes.

QuantumAlert Basic Alert

// light theme
Qual.sw('CSSScript');
// dark theme
Qual.sd('CSSScript');
// dark blue theme
Qual.sdb('CSSScript');

3. Create alert dialog boxes with headers.

QuantumAlert Alert Header

// light theme
Qual.sw('CSSScript', 'Light Theme');
// dark theme
Qual.sd('CSSScript', 'Dark Theme');
// dark blue theme
Qual.sdb('CSSScript', 'Dark Blue Theme');

4. Create an alert dialog with an animated error icon.

QuantumAlert Alert Error

// light theme
Qual.error('CSSScript', 'Light Theme');
// dark theme
Qual.errord('CSSScript', 'Dark Theme');
// dark blue theme
Qual.errordb('CSSScript', 'Dark Blue Theme');

5. Create an info dialog with an animated info icon.

QuantumAlert Alert Info

// light theme
Qual.info('CSSScript', 'Light Theme');
// dark theme
Qual.infod('CSSScript', 'Dark Theme');
// dark blue theme
Qual.infodb('CSSScript', 'Dark Blue Theme');

6. Create a success dialog with an animated success icon.

QuantumAlert Alert Success

// light theme
Qual.success('CSSScript', 'Light Theme');
// dark theme
Qual.successd('CSSScript', 'Dark Theme');
// dark blue theme
Qual.successdb('CSSScript', 'Dark Blue Theme');

7. Create a warning dialog with an animated warning icon.

QuantumAlert Alert Warning

// light theme
Qual.warning('CSSScript', 'Light Theme');
// dark theme
Qual.warningd('CSSScript', 'Dark Theme');
// dark blue theme
Qual.warningdb('CSSScript', 'Dark Blue Theme');

8. Create an alert dialog with a custom icon.

QuantumAlert Alert Custom Icon

// light theme
Qual.icon('CSSScript', 'Light Theme', 'icon.svg');
// dark theme
Qual.icond('CSSScript', 'Dark Theme', 'icon.svg');
// dark blue theme
Qual.icon('CSSScript', 'Dark Blue Theme', 'icon.svg');

9. Create a confirm dialog with the following parameters:

  • pop_heading_value: Confirm Title
  • pop_heading_content: Confirm Message
  • icon: succ, err, inf, or war
  • yes_btn: Text for confirm button
  • no_btn: Text for cancel button
  • yes_btn_fun: custom function fired on confirm
  • no_btn_fun: custom function fired on cancel
// light theme
Qual.confirm(
  'Are you sure you want to continue', 
  'Click Ok button to continue and Cancel to Close', 
  succ, 
  'OK', 
  'Cancel', 
  'Ok_btn_function'
)
// dark theme
Qual.confirmd(
  'Are you sure you want to continue', 
  'Click Ok button to continue and Cancel to Close', 
  succ, 
  'OK', 
  'Cancel', 
  'Ok_btn_function'
)
// dark blue theme
Qual.confirmdb(
  'Are you sure you want to continue', 
  'Click Ok button to continue and Cancel to Close', 
  succ, 
  'OK', 
  'Cancel', 
  'Ok_btn_function'
)

10. Create a prompt dialog with extra parameters:

  • type_field: input field type
  • place_holder: placeholder text
Qual.confirmdb(
  'Are you sure you want to continue', 
  'Click Ok button to continue and Cancel to Close', 
  succ, 
  'OK', 
  'Cancel', 
  'Ok_btn_function',
  "text", 
  "Enter your name"
)

Changelog:

08/27/2020

  • Update quantumalert.css

You Might Be Interested In:


Leave a Reply