Jane Doe Jane Doe - 11 months ago 39
Javascript Question

How to Fade In a notification by clicking a text field

Hi guys I need help (again). I wanted to learn how to make the notification or alert box fade-in and fade-out after clicking a editable textbox.

This is the code for the alert box:

<div class="alert alert-warning fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a>
Alert: Please don't do this.

and this is the script for onClick:

function clicks() {
document.getElementById("notif").innerHTML = "Hello World";

I was thinking I will put the
div alert box
inside a
or just a script with onClick function

Answer Source

Working example on CodePen: http://codepen.io/oculusriff/pen/aBoKvE


<div id="alert" class="alert alert-warning fade">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Alert: Please don't do this.

<textarea id="txt"></textarea>


var textarea = document.getElementById('txt');
var alert = document.getElementById('alert');

txt.addEventListener('focus', function() {

  setTimeout(function() {
  }, 2000);

txt.addEventListener('blur',function (){