The magic solution to display alert in any project using the least possible code.
- Download file alert.js.
- Add the file to your project.
- Make sure to add Bootstrap CSS and JS to your code.
- Before import alert.js.
<script src="/alert.js"></script>
- Make a div with any class name you like here your alert will appears.
<div class="alert"></div>
- Use the following function
alertUser(color, message, className, bootstrapVersion);
- @param
color- The color of the alert using bootstrap class color. - @param
message- The message you want to display to the user. - @param
className- The class of the div you want to append the alert to. - @param
bootstrapVersion- This is the version of bootstrap you are using. If you are using bootstrap - 5, then you can pass in 5 or "5" as the parameter. If you are using bootstrap 4, then you can pass in 4 or "4" as the parameter
- in the parameter to use bootstrap 4.
<!DOCTYPE html>
<html lang="en">
<head>
<title>alertUser</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"/>
</head>
<body>
<div class="alertUser"></div>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
<!--import alert.js-->
<script src="/alert.js"></script>
<!--Using the code-->
<script>
alertUser("primary", "This is an example of an alert", "alertUser", "5");
alertUser("secondary ", "This is an example of an alert", "alertUser", 5);
alertUser("success", "This is an example of an alert", "alertUser", 5);
alertUser("danger", "This is an example of an alert", "alertUser", 5);
alertUser("info", "This is an example of an alert", "alertUser", 5);
alertUser("light", "This is an example of an alert", "alertUser", "5");
alertUser("dark", "This is an example of an alert", "alertUser", 5);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>alertUser</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="alertUser"></div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!--import alert.js-->
<script src="/alert.js"></script>
<!--Using the code-->
<script>
alertUser("primary", "This is an example of an alert", "alertUser", "4");
alertUser("secondary ", "This is an example of an alert", "alertUser", 4);
alertUser("success", "This is an example of an alert", "alertUser", "4");
alertUser("danger", "This is an example of an alert", "alertUser", 4);
alertUser("info", "This is an example of an alert", "alertUser", "4");
alertUser("light", "This is an example of an alert", "alertUser", 4);
alertUser("dark", "This is an example of an alert", "alertUser", "4");
</script>
</body>
</html>
The function takes in 4 arguments, the color of the alert, the message, the class name of the div that will contain the alert, and the bootstrap version. The function then creates a div element, sets the class attribute to the alert class, and sets the text content to the message. It then creates a button element, sets the type attribute to button, sets the class attribute to close, and sets the data-dismiss attribute to alert. It then creates a span element, sets the aria-hidden attribute to true, and sets the innerHTML to a times symbol. It then appends the span element to the button element. It then appends the button element to the div element. It then appends the div element to the alert div.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent