Bootstrap
How make toast hide after few second without button #40800
-
|
Hi, However, now I'm looking for an adaptation of this code to show the toast when the page is loaded and make the toast disapear automatticaly after few seconds. Could you help me ? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
try this HTML
Javascript
|
Beta Was this translation helpful? Give feedback.
-
|
Works like a charm. Thanks ANU1o ! |
Beta Was this translation helpful? Give feedback.
-
|
To make a toast hide automatically after a few seconds without needing a button, you can use JavaScript to set a timer. Here's an example using HTML, CSS, and JavaScript: HTML: This is a toast message!
CSS:
css
Copy code
.toast {
visibility: hidden;
min-width: 250px;
background-color: #333;
color: white;
text-align: center;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
border-radius: 4px;
}
.toast.show { @Keyframes fadeOut { } // Call the function to display the toast |
Beta Was this translation helpful? Give feedback.
-
|
In his source code
|
Beta Was this translation helpful? Give feedback.
try this
HTML
<body onload="loaderToast()"></body>Javascript
function loaderToast () { const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastBootstrap.show() }