Press "Enter" to skip to content

A Powerful and Elegant Alert, Confirm and Prompt Popup Boxes in JavaScript | QuantumAlert

QuantumAlert is an easy-to-use JavaScript library for creating elegant, customizable dialogs to replace browser alert, confirmation, and prompt boxes. It works on any type of browser because it uses pure JavaScript that supports in the long run. So it will not affect the stability and performance of your website.

Features:

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

How to make use of it:

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

 

2. Create alert dialog packing containers with totally different themes.

// light theme
Qual.sw('CSSScript');

// dark theme
Qual.sd('CSSScript');

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

3. Create alert dialog packing containers with headers.

// 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.

// 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 a data dialog with an animated data icon.

// 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 successful dialog with an animated success icon.

// 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.

// 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 customized 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 verify dialog with the next parameters:

  • pop_heading_value: Confirm Title
  • pop_heading_content: Confirm Message
  • icon: succ, err, inf, or conflict
  • yes_btn: Text for verifying button
  • no_btn: Text for cancel button
  • yes_btn_fun: customized perform fired on verify
  • no_btn_fun: customized perform 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 an immediate dialog with further parameters:

  • type_field: enter field sort
  • 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"
)

See Demo And Download

Official Website(CosmogicOfficial): Click Here

This superior jQuery/javascript plugin is developed by CosmogicOfficial. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.