CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Jack The Baker
Jack The Baker

Reputation: 1883

Bootstrap alert append and fade in/out

I want to add Bootstrap alert dynamically with fadeIn effect and fadeOut effect on close, I tried:

function alert(title, text, type) {
  var html = $("<div class='alert alert-dismissible hide fade " + type + "'><strong>" + title + "</strong> " + text + "<a href='#' class='close float-close' data-dismiss='alert' aria-label='close'>×</a></div>");
  $('body').append(html);
  html.addClass('in show');
}


$('#EMail').click(function() {
  alert('Error!', 'Your Email is not valid', 'alert-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<input type="text" id="EMail" />

With this, close work successfully but append with fadeIn effect not working. How can I append Bootstrap alert in document with fadeIn effect?

Note that, I don't need jQuery fadeIn or fadeOut I want to do this only with standard bootstrap class such fade + in or out

Upvotes: 0

Views: 3481

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Updated function with a setTimeout

function alert(title, text, type) {
  var html = $("<div class='alert alert-dismissible hide fade in " + type + "'><strong>" + title + "</strong> " + text + "<a href='#' class='close float-close' data-dismiss='alert' aria-label='close'>×</a></div>");
  $('body').append(html);
  setTimeout(function() {
 html.addClass('show');
  },0);
}


$('#EMail').click(function() {
  alert('Error!', 'Your Email is not valid', 'alert-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<input type="text" id="EMail" />

Upvotes: 2

Related Questions