Quantum Alert

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert.

QuantumAlert Licence

Built to work on any browser.

QuantumAlert supports at max all the browsers. It works on any kind of Browser because it uses pure JavaScript that has long term support. So it will not affect the stablity and performance of your website.

Chrome support Firefox support Safari support Edge support Opera support

# 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>
    copyimage

    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");
    copyimage

    For Simple Dark alert box

    Qual.sd("Hello Cosmogic");
    copyimage

    For Simple Dark Blue alert box

    Qual.sdb("Hello Cosmogic");
    copyimage

    # 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");
    copyimage

    For Dark alert box with Heading

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

    For Dark Blue alert box with Heading

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

    # 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");
    copyimage

    For success icon with Dark background.

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

    For success icon with DarkBlue background.

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



    For alert box with animated error icon

    For error icon with White background.

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

    For error icon with Dark background.

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

    For error icon with DarkBlue background.

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



    For alert box with animated warning icon

    For warning icon with White background.

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

    For warning icon with Dark background.

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

    For warning icon with DarkBlue background.

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



    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. ");
    copyimage

    For info icon with Dark background.

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

    For info icon with DarkBlue background.

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



    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");
    copyimage

    For alert box with custom icon and Dark background.

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

    For alert box with custom icon and DarkBlue background.

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



    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.
    )
    ;
    copyimage

    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.
    )
    ;
    copyimage

    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.
    )
    ;
    copyimage



    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.

    )
    ;
    copyimage

    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.