Html/Css - Make Alert Disappear After a Few Seconds

HTML/CSS - Make alert disappear after a few seconds

You can use [class.visible]="isVisible" to binds the presence of the CSS class
and setTimeout function to toggle isVisible to false after few second.

template

<button (click)="showAlert()">show alert</button>

<div class="alert" [class.visible]="isVisible"> 
  JWT copied to clipboard
</div>

component

export class AppComponent  {

  public isVisible: boolean = false;

  showAlert() : void {
    if (this.isVisible) { // if the alert is visible return
      return;
    } 
    this.isVisible = true;
    setTimeout(()=> this.isVisible = false,2500); // hide the alert after 2.5s
  }

}

alert style

.alert  {
  position: fixed;
  top: 0;
  right: 0.5rem;
  border:1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  padding: 2rem;
  background: #fff;
  color: #f65656;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);
  transition:  all 0.2s ease-in-out;
  opacity: 0;
}

.visible {
  opacity: 1;
  transform: translateY(1.25rem);
}

stackblitz example

how to realize an alert that disappears after some seconds

You need to build the dialog yourself using HTML elements.

After this is done you should check setTimeout() that will allow you to perform a function after a preset period of time - e.g visibility:hidden your custom dialog.

var hideTimeout = 1000; //how many ms to wait before hiding after displaying
function customAlert() {
  //display the box  var customAlert = document.getElementById("custom-alert-1");  customAlert.style.visibility = 'visible';
  //set up a timer to hide it, a.k.a a setTimeout()  setTimeout(function() {    customAlert.style.visibility = 'hidden';  }, hideTimeout)}

body {  text-align: center;}button {  display: block;  margin: 0 auto;  margin-top: 32px;}.custom-alert {  display: inline-block;  visibility: hidden;  background-color: #666;  color: #fff;  text-align: enter;  margin: 5% auto;  padding: 12px 48px;}

<div id='custom-alert-1' class="custom-alert">Hello World</div><button onclick="customAlert()">Click to alert</button>

How to disappear alert after 5 seconds in React JS?

You can read through the comments

import { useState, useEffect } from 'react'
    
const Message = ({ variant, children }) => {
  const [show, setShow] = useState(true)

  // On componentDidMount set the timer
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 3 seconds set the show value to false
      setShow(false)
    }, 3000)

    return () => {
      clearTimeout(timeId)
    }
  }, []);

  // If show is false the component will return null and stop here
  if (!show) {
    return null;
  }

  // If show is true this will be returned
  return (
    <div className={`alert alert-${variant}`}>
      {children}
    </div>
  )
}

Message.defaultPros = {
  variant: 'info',
}

export default Message;

How to create a div which disappears after a time, but hovering will keep it?

var myTimeOut = setTimeout("mytimeoutfunction()", 3000);$('#alert_box').mouseout( function () {  myTimeOut = setTimeout("mytimeoutfunction()", 3000)});
$('#alert_box').mouseover( function () {  clearTimeout(myTimeOut);});
var mytimeoutfunction = function () {  $('#alert_box').fadeOut('fast');}
// On click, fadeout$("#close").click(mytimeoutfunction);

.alert_wrap { padding: 0px 50px; margin-top: 3px; height: 5%; background-color: rgba(255, 0, 0, .3); border: 3px solid red; grid-row-start: 2; justify-self: center;}#alert_box {  position: relative;}#close {  position: absolute;  top: 10px;  right: 10px;  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="alert_box" class="alert_wrap"> <p class="notice">This is notice text</p> <p class="alert">This is alert text</p>    <span id="close">X</span></div>

Make an alert using twitter's bootstrap disappears after a few seconds

Firstly, you're missing jQuery library, include it before bootstrap.min.js

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

Secondly, it should be #alert_message instead of .alert-message:

window.setTimeout(function() {
  $("#alert_message").fadeTo(500, 0).slideUp(500, function(){
    $(this).remove(); 
  });
}, 3000);

Bootply Demo

Disappear grails alert message after 10 second

setTimeout(function() {
    $('#successMessage').fadeOut('fast');
}, 10000);

This will fade away your div(popup) after 10 seconds

How to auto close an alert after few seconds with Bootstrap?

You can use the Bootstrap methods to achieve this. Take a look here at the bottom of the page for more info.

Logic

When the button is clicked jQuery removes the class d-none of the alert element which makes it visible. And then by using setTimeout() JS will wait 2000ms before closing the alert with alert() bootstrap 4 method.

It will work for only one click.

Note: using Bootstrap 4 methods requires to work with jQuery.

$('#btn').click(function(){

  $('#alert').removeClass('d-none');
  
  setTimeout(() => {
    $('.alert').alert('close');
  }, 2000);
  
})

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
 
<div id="alert" class="alert alert-primary m-3 d-none" role="alert">
  This is a primary alert—check it out!
</div>

<button class="btn btn-primary m-3" id="btn">
  show alert and close it in 2 seconds
</button>

Html/Css - Make Alert Disappear After a Few Seconds