Display Beautiful and Responsive Alert/Confirm/Prompt Dialog Box in JavaScript
source link: https://www.codexworld.com/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Display Beautiful and Responsive Alert/Confirm/Prompt Dialog Box in JavaScript
In JavaScript, three kinds of dialog boxes are available, Alert box, Confirm box, and Prompt box. These popup boxes are used to show the status message on the browser, based on the action requested by the user. Generally, the alert(), confirm(), prompt() methods are used to display Alert/Confirm/Prompt boxes in JavaScript.
Alert Dialog Box:
The alert()
method shows a popup box with a specific message and an “Ok” button.
alert(message)
Confirm Dialog Box:
The confirm()
method shows a popup box with a specific message, along with an “Ok” and “Cancel” button.
confirm(message)
Prompt Dialog Box:
The prompt()
method shows a popup box with an input field, along with an “Ok” and “Cancel” button.
prompt(text, defaultText)
The browser’s default alert box can be replaced with a beautiful dialog box using the JavaScript plugin. The SweetAlert is an easy-to-use plugin that helps to display beautiful and responsive alert boxes using JavaScript. This tutorial will show you how to display beautiful and responsive Alert, Confirm, and Prompt popup boxes with SweetAlert in JavaScript.
Before getting started, include the SweetAlert JavaScript library.
<script src="sweetalert.min.js"></script>
Now, you can use the global swal
variable to show an alert dialog.
Showing an Alert
Call the swal() function and pass the message.
swal("Hello CodexWorld!");
Alert Box with Title and Text
Pass two arguments to show a title and text in the alert box, first one will be the title and the second one is the text.
swal("Here's the title!", "...and here's the text!");
Alert Box with Status
Pass status in the third argument to add an icon in an alert box. There are 4 predefined: warning
, error
, success
and info
.
swal("Operation success!", "You clicked the button!", "success");
swal("Operation failed!", "You clicked the button!", "error");
swal Object Options
You can use arguments as options with swal object.
swal({ title: "Hello CodexWorld!", text: "You clicked the button!", icon: "success", });
Alert Box with Custom Button Text
Use the button
option to specify the text of the confirm button.
swal({ title: "Operation success!", text: "You clicked the button!", icon: "success", button: "Aww yiss!", });
Confirm Dialog Box
The following code snippet shows a confirm popup box.
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!"); } });
Alert Dialog with Ajax Request
The following code snippet shows how to integrate ajax request in the Alert popup box.
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(); } });
Are you want to get implementation help, or modify or enhance the functionality of this script? Submit Paid Service Request
If you have any questions about this script, submit it to our QA community - Ask Question
Recommended Tutorials For You
Leave a reply
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK