There are three types of dialogue boxes in JavaScript: alert boxes, confirm boxes, and prompt boxes. Such flash windows are being used to display the push notification on the screen dependent on the user's behaviour. In JavaScript, the confirm(), alert(), and prompt() functions are commonly used to show Confirm/Alert/Prompt boxes.
Alert Dialog Box:
The alert() function displays a popup window containing a message and a "Ok" button.
alert(message)
Confirm Dialog Box:
The confirm() function displays a popup window with a message, as well as a "Ok" and "Cancel" button.
confirm(message)
Prompt Dialog Box:
The prompt() function displays a popup window with an input box and buttons for "Ok" and "Cancel."
prompt(text, defaultText)
Using the JavaScript plugin, you may replace the browser's default alert box with a stunning dialogue box. SweetAlert is a simple plugin that allows you to show attractive and dynamic alert windows using JavaScript. This article will teach you how to use SweetAlert in JavaScript to show gorgeous and fast Confirm, Alert, and Prompt popup windows.
Also include SweetAlert JavaScript library before you begin.
<script src="sweetalert.min.js"></script>
You may now utilise the worldwide swal variable to display an alert dialogue.
Call the swal() function and pass the message.
swal("Hello Themesgiant!");
Pass two parameters to display a header and message in the alert box; the first is the title, and the second is the text.
swal("Here's the title!", "...and here's the text!");
To insert a symbol in an alert box, pass status as the third argument. There are four predefined options: warning, error, success, and information.
swal("Operation success!", "You clicked the button!", "success");
swal("Operation failed!", "You clicked the button!", "error");
Arguments can be used as options with the swal object.
swal({
title: "Hello CodexWorld!",
text: "You clicked the button!",
icon: "success",
});
To set the wording of the confirm button, use the button option.
swal({
title: "Operation success!",
text: "You clicked the button!",
icon: "success",
button: "Aww yiss!",
});
The code line below displays a confirm popup window.
swal({
title: "Are you sure?",
text: "Once deleted, this operation can't be reverted!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Done! Your file has been deleted!", {
icon: "success",
});
} else {
swal("Delete operation is cancelled!");
}
});
The code snippet below demonstrates how to incorporate an ajax request into the Alert popup window.
swal({
text: 'Search for a movie. e.g. "La La Land".',
content: "input",
button: {
text: "Search!",
closeModal: false,
},
})
.then(name => {
if (!name) throw null;
return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
return results.json();
})
.then(json => {
const movie = json.results[0];
if (!movie) {
return swal("No movie was found!");
}
const name = movie.trackName;
const imageURL = movie.artworkUrl100;
swal({
title: "Top result:",
text: name,
icon: imageURL,
});
})
.catch(err => {
if (err) {
swal("Oh noes!", "The AJAX request failed!", "error");
} else {
swal.stopLoading();
swal.close();
}
});
© ThemesGiant Copyright @2015-2022 | All rights reserved.