Home / Questions / 21460
Accepted
Efrain Mejias C
Asked: 2020-08-24 12:31:46 +0800 CST 2020-08-24 12:31:46 +0800 CST

Alert JavaScript with Timer

  • 772

How can I create an Alert in JavaScript that is seen for 2 seconds and then closes automatically (only) without the user clicking accept?

javascript

6 Answers

  1. I present to you Toastr, it is a library JavaScriptthat generates notifications in a " modern " way:

    toastr.options = {
  "debug": false,
  "positionClass": "toast-bottom-right",
  "onclick": null,
  "fadeIn": 300,
  "fadeOut": 100,
  "timeOut": 5000,
  "extendedTimeOut": 1000
}

var showToastrs = false;

function toastrs() {
  if (!showToastrs) {
    toastr.error('Estamos bajo ataque DDoS', 'Error Critico!');
    toastr.success('Se guardaron los cambios satisfactoriamente', 'Todo en orden');
    toastr.warning('La latencia del server esta aumentando.', 'Alerta!');
  } else {
    toastr.error('no se puede!\'t.', 'Otro error crítico');
  }
}

// Definimos los callback cuando el TOAST le da un fade in/out:
toastr.options.onFadeIn = function() {
  showToastrs = true;
};
toastr.options.onFadeOut = function() {
  showToastrs = false;
};

$(function() {
  $("#clear").on("click", function() {
    // Clears the current list of toasts
    toastr.clear();
  });
  $("#rewind").on("click", function() {
    // show toastrs :)
    toastrs();
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<link href="http://codeseven.github.com/toastr/toastr.css" rel="stylesheet"/>
<link href="http://codeseven.github.com/toastr/toastr-responsive.css" rel="stylesheet"/>
<a href="http://codeseven.github.io/toastr/demo.html" target="_blank">Toastr official demo</a>
<br/>
<br/>
<input id="clear" type="submit" value="Limpiar notificaciones">
<input id="rewind" type="submit" value="Mostrar notificaciones">

    • 6
  2. Best Answer

    I do it with the setTimeout function. In the following way. 

    $('#alert').fadeIn();     
  setTimeout(function() {
       $("#alert").fadeOut();           
  },2000);

    • 4

  3. I see that you want to open and close the message, with Javascript this cannot be done, closing the message has to be done manually.

    As another option is to show a window with the message and close it automatically after 2 seconds (2000 ms).

    <html>
<body>

<p>Abre un mensaje que se cerrara en 2 segundos.</p>

<button onclick="ejecutaAlerta()">muestra mensaje</button>

<script>
function ejecutaAlerta() {   
var w = window.open('','','width=100,height=100')
w.document.write('Hola StackOverflow!')
w.focus()
setTimeout(function() {w.close();}, 2000)
}
</script>

</body>
</html>

    The caller of the function is the setTimeOut() method :

    setTimeout() Executes a function, after waiting for a specified number of milliseconds.

    • 4

  4. Another option that can help you isJQuery jGrowl

    I leave you an example with a duration of 2 seconds:

    $.jGrowl("Hello world!",{ life : 2000});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>

    if you require something more "modern" I recommendtoastr

    • 3

  5. I like @fredyfx's solution but if you care about load speed and resources used by your app you can implement something similar in less bytes by putting only the functions you are going to use.

    This is an example, of course you can adjust the styles to the aesthetics of your application and you can add more features. This is a basis for writing your own component without having to load large libraries that result in heavy applications.

    (function(window, document) { // asilamos el componente
  // creamos el contedor de las tostadas o la tostadora
  var container = document.createElement('div');
  container.className = 'toast-container';
  document.body.appendChild(container);
  
  // esta es la funcion que hace la tostada
  window.doToast = function(message) {
    // creamos tostada
    var toast = document.createElement('div');
    toast.className = 'toast-toast';
    toast.innerHTML = message;

    // agregamos a la tostadora
    container.appendChild(toast);    

    // programamos su eliminación
    setTimeout(function() {
      // cuando acabe de desaparecer, lo eliminamos del dom.
      toast.addEventListener("transitionend", function() {
         container.removeChild(toast);
      }, false);

      // agregamos un estilo que inicie la "transition". 
      toast.classList.add("fadeout");      
    }, 2000); // OP dijo, "solo dos segundos"
  }
})(window, document);

// ejempo de uso
doToast("Hola mundo!");

// ejemplo retardado de uso
setTimeout(function() {
   doToast("Soy una tostada");
}, 1200);
    .toast-container {
  position: fixed;
  width: 150px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10; /* sobre todo lo demás */
}

.toast-toast {
  font-size: 250%;
  margin-bottom: 3px;
  border-radius: 2px;
  border: 1px green;
  background: #98FF98;
  text-align: center;
  line-height: 1;  
  transition: all 0.5s; 
}

.fadeout{
  opacity: 0;
}

    • 3

  6. With the standard javascript alert I doubt you can do it, but if you use an alert implemented from jquery as being

    jqAlert

    You will see in the example that to implement a timer, for example the one in the title Alert Dialogsdefines

    $.alert('jqAlert is easy to use with alerts and its where I got my start.', {
    title:'Alert Title Message',
    icon:'',
    customIcon:'icon-asterisk',
    exception: 'Exception',
    stack: 'Stack Trace',
    timer:5000,
    onTimeout:function() { },
    onClose: function() { },
    buttons:[
        {
            title:'Press Me',
            callback:function() { $(this).dialog("close");}
        }
    ]
});

    you will see timer:5000after that time it closes itself

    • 2