display toastr success
How to Display Toastr Success in HTML
Introduction
If you are a web developer, you might have come across the need to display a notification or alert message to your users. One popular library that can help you to achieve this is Toastr. Toastr is a simple and lightweight library that allows you to display notifications on your web page.
Displaying Toastr Success Message
If you want to display a success message using Toastr, you can follow these steps:
- Step 1: Include the toastr CSS and JavaScript files in your HTML file. You can download the files from the Toastr GitHub repository (https://github.com/CodeSeven/toastr).
- Step 2: Add a div element to your HTML file where you want to display the success message.
- Step 3: Create a JavaScript function that will be called when you want to display the success message. In this function, you can use the toastr.success() method to display the success message.
- Step 4: Call the JavaScript function when you want to display the success message.
Here is the code that you can use to display a success message using Toastr:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="toastr.min.css">
<script src="jquery.min.js"></script>
<script src="toastr.min.js"></script>
<script>
function displaySuccessMessage() {
toastr.success('Your message has been sent successfully!');
}
</script>
</head>
<body>
<div id="success-message"></div>
<button onclick="displaySuccessMessage()">Send Message</button>
</body>
</html>In the above code, we have included the toastr CSS and JavaScript files in the head section of our HTML file. We have also added a div element with id "success-message" where we want to display the success message. We have created a function named "displaySuccessMessage" that will be called when we click the "Send Message" button. In this function, we have used the toastr.success() method to display the success message.
When you run the above code, you will see a button on the web page. When you click this button, the success message "Your message has been sent successfully!" will be displayed using Toastr.
Conclusion
Toastr is a simple and useful library that can help you to display notifications on your web page. By following the above steps, you can easily display a success message using Toastr in your HTML file.