In the following example, we have one button and upon click of a button, we will display a custom alert box using SweetAlert JS. Please have a look over the code example and the steps given below.
HTML & CSS
We have 2 elements in the HTML file (div and button).
The div element is just a wrapper for the button element. We are using the style attribute here just to center align the button element horizontally.
The inner text for the button element is “Show”.
We have included the CDN link of SweetAlert JS using the script tag at the bottom of the HTML file.
We have selected the button element using the document.querySelector() method and stored it in btnShow variable.
We have attached the click event listener to the button element.
In the event handler function, we are calling the swal() method of the SweetAlert JS. This method takes an object as a parameter. In this object, you can specify the custom title, message, icon, and text on the confirm button.