Javatpoint Logo
Javatpoint Logo

SweetAlert

What is the SweetAlert?

SweetAlert is a method to customize alerts in your applications, websites and games. It allows the user to change it with a standard JavaScript button. You can add a new button to it, change the background color of the button, change the button's text, and add additional alerts that depend on the user's click. You can also put the icons with your alerts message in it.

SweetAlert is a replacement for the "window.alert()" function of JavaScript that shows wonderful modal popup windows. It is a standalone library with no dependencies and is composed of a JavaScript file plus a CSS file.

Installation of SweetAlert

NPM is the recommended method of installing SweetAlert in conjunction with tools such as BrowserWise or Webpack.

Then, just import it into your project and application:

You can also get a CDN link for the latest version of the library and include it in your webpage using script tags:

In addition to the JavaScript file, you must also load a CSS file, which is used to design all the alert boxes created by the library:

Once the library is set up, creating a SweetAlert message is very easy. All you have to do is call the swal() function.

Examples of sweetalert

Basic example

1. Simple message alert

2. If you pass two arguments to the swal() function, the first will be the title of the model, and the second is the text of the model, shown below

Error and success message


Customize confirm button

You can choose a lot of options to configure your alert code. For example, you can change the text on the confirmation button.



An alert message with a function attached to the "Confirm" button and "cancel" button.


An alert message with the customize icon.

A replacement of the "prompt" function

swal() function with a loader gif button (for a AJAX requests)

Using React

With JSX syntax, if you are using SweetAlert, you will need to install React.

After that, it is very easy to import SweetAlert.

The JSX syntax changes the model's content option, so you can still use other features of SweetAlert.


Next TopicTypes of Rocks




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA