QuantumAlert - A Powerful and Elegant "JavaScript Alert library " that replaces that boring alert style of Javascript's popup boxes or modals.

# Installation

1. Place the below script tag just at the ending of head tag and before any other script tag in your HTML webpage.

We have three themes white, Dark and DarkBlue themes to use in our website.

<script src="https://cdn.jsdelivr.net/gh/cosmogicofficial/quantumalert@latest/minfile/quantumalert.js" charset="utf-8"></script>

2. Add the defer andsync keyword in the script tag of the javascript file in which we want to use the QuantumAlert library. It will improve the performance of the webpage.

For Example

<script src="example.js" charset="utf-8" defer sync> </script>

# Getting Started

For Simple White alert box

After Installation of CDN into our website, we can now make a Simple white alert box using the below command.

Here Qual is a class and sw is a function of this class which shows us a alert with white background.

Qual.sw("Hello Cosmogic");

For Simple Dark alert box

Qual.sd("Hello Cosmogic");

For Simple Dark Blue alert box

Qual.sdb("Hello Cosmogic");

# Simple alert box with Heading

Using this command we can enter two arguments , first one is for Heading which is of bold text with increased font size and second one is for sub heading. You can also enter only one argument for bold heading only. If we want alert with Bold Heading only.

For White alert box with Heading

Qual.swh("Welcome","Nice to meet you");

For Dark alert box with Heading

Qual.sdh("Welcome","Nice to meet you");

For Dark Blue alert box with Heading

Qual.sdbh("Welcome","Nice to meet you");

# Alert box with icon

Using this command we can have alert box with icon . We have five commands for 5 different usage that are success , error , warning , info and icon .

For alert box with animated success icon

For success icon with White background.

Qual.success("Success","File Uploaded Successfully");

For success icon with Dark background.

Qual.successd("Success","File Uploaded Successfully");

For success icon with DarkBlue background.

Qual.successdb("Success","File Uploaded Successfully");

For alert box with animated error icon

For error icon with White background.

Qual.error("Oh no !","Something wrong happened");

For error icon with Dark background.

Qual.errord("Oh no !","Something wrong happened");

For error icon with DarkBlue background.

Qual.errordb("Oh no !","Something wrong happenedWarning");

For alert box with animated warning icon

For warning icon with White background.

Qual.warning("Warning","This will delete your files permanently.");

For warning icon with Dark background.

Qual.warningd("Warning","This will delete your files permanently.");

For warning icon with DarkBlue background.

Qual.warningdb("Warning","This will delete your files permanently.");

For alert box with animated info icon

For info icon with White background.

Qual.info("Information","Your all files will now sync to our cloud. ");

For info icon with Dark background.

Qual.infod("Information","Your all files will now sync to our cloud. ");

For info icon with DarkBlue background.

Qual.infodb("Information","Your all files will now sync to our cloud. ");

For alert box with our custom icon or image

Using this command we can have alert box with custom icon . We can specify the link or location of the image as the third argument .

For alert box with custom icon and White background.

Qual.icon("Hello Friends","Are you doing something great in life.","cow.gif");

For alert box with custom icon and Dark background.

Qual.icond("Hello Friends","Are you doing something great in life.","cow.gif");

For alert box with custom icon and DarkBlue background.

Qual.icondb("Hello Friends","Are you doing something great in life.","cow.gif");

For alert box with our custom icon or image and two buttons with click handlers attached to it.

Using this command we can have alert box with custom icon . We can specify the link or location of the image as the third argument .

For alert box with custom icon,White background and two buttons.

Qual.confirm(
"Are you sure you want to continue ",   //Heading of the alert box,
"Click Ok button to continue and Cancel to Close",  //Sub-Heading of the alert box,
 succ,   //We can use icons that predefined in variables that are succ for success icon err for error iconwar for warninginffor info icon and also custom image by using think link or address  of the image in the alert box .
"OK",  //Specify text to display in place of  Ok text.
"Cancel", //Specify text to display in place of  Cancel text.
"Ok_btn_function", //Specify function name that you want to execute on click on OK button. 
"Cancel_btn_function" //Specify function name that you want to execute on click on Cancel button. 
);

Note: We cannot change the order of the arguments entered. We have to enter values in the same order as it is declared. If we don't want to have some field then simply enter "" at that place. For changing third argument which is image of alert box you can use predefined image variable succ , err , inf , war without "" this double quotes because these are variables. If you want to link any other image then you have to specify the link or address of that image in "" double quotes.

For alert box with custom icon,Dark background and two buttons.

Qual.confirmd(
"Are you sure you want to continue",   //Heading of the alert box,
"Click Ok button to continue and Cancel to Close",  //Sub-Heading of the alert box,
 succ,   //We can use icons that predefined in variables that are succ for success icon err for error iconwar for warninginffor info icon and also custom image by using think link or address  of the image in the alert box .
"OK",  //Specify text to display in place of  Ok text.
"Cancel", //Specify text to display in place of  Cancel text.
"Ok_btn_function", //Specify function name that you want to execute on click on OK button. 
"Cancel_btn_function" //Specify function name that you want to execute on click on Cancel button. 
);

For alert box with custom icon,DarkBlue background and two buttons.

Qual.confirmdb(
"Are you sure you want to continue",   //Heading of the alert box,
"Click Ok button to continue and Cancel to Close",  //Sub-Heading of the alert box,
 succ,   //We can use icons that predefined in variables that are succ for success icon err for error iconwar for warninginffor info icon and also custom image by using think link or address  of the image in the alert box .
"OK",  //Specify text to display in place of  Ok text.
"Cancel", //Specify text to display in place of  Cancel text.
"Ok_btn_function", //Specify function name that you want to execute on click on OK button. 
"Cancel_btn_function" //Specify function name that you want to execute on click on Cancel button. 
);

For alert box with our custom icon or image , two buttons and a input field with click handlers attached to it.

We can add a input field to our alert box using above same command that is confirm . By just adding two more argument at the end all the arguments .

Change colour of alert box just by changing confirm for white , confirmd for dark background and confirmdb for dark blue .

Qual.confirmd(
"Are you sure you want to continue",   //Heading of the alert box,
"Click Ok button to continue and Cancel to Close",  //Sub-Heading of the alert box,
 succ,   //We can use icons that predefined in variables that are succ for success icon err for error iconwar for warninginffor info icon and also custom image by using think link or address  of the image in the alert box .
"OK",  //Specify text to display in place of  Ok text.
"Cancel", //Specify text to display in place of  Cancel text.
"Ok_btn_function", //Specify function name that you want to execute on click on OK button. 
"Cancel_btn_function" , //Specify function name that you want to execute on click on Cancel button. 
"text", //Specify the type  of the input field  "text" for text input , "password"  for password etc.
"Enter your name", //Specify placeholder  text for input field. 

);

Note: To get the value from input field just copy the value of predefined variable inxto any other variable.
Example: - var a = inx; . So here a variable holds the value that is entered in the input field.