Adding Bootstrap alert messages dynamically and having them fade in and out

Is it possible to dynamically add a Bootstrap alert with a fadeIn effect and fadeOut effect on close without using jQuery fadeIn or fadeOut functions?

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" />

Even though the close functionality works successfully, the append with fadeIn effect is not working. How can I append a Bootstrap alert in the document with a fadeIn effect using standard Bootstrap classes like fade + in or out?

Note that I am specifically looking to achieve this without using jQuery fadeIn or fadeOut functions.

Answer №1

Improved function implementation using setTimeout method

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

$('#EMail').click(function() {
  notifyUser('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" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues with accessing properties of undefined while chaining methods

When comparing lists using an extension method that calls a comparer, I encountered an error. Here is the code snippet: type HasDiff<T> = (object: T, row: any) => boolean; export const isListEqualToRows = <T>(objects: T[], rows: any[], has ...

Develop a "Read More" button using Angular and JavaScript

I am in search of all tags with the class containtText. I want to retrieve those tags which have a value consisting of more than 300 characters and then use continue for the value. However, when I implement this code: <div class=" col-md-12 col-xl-12 c ...

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

Exposing external variables within the setInterval function

Here is the snippet of code I am working with: update: function(e,d) { var element = $(this); var data = element.data(); var actor = element.find('.actor'); var value = basicdesign.defaultUpdate( e, d, element, true ); var on = templateEn ...

The function of disabling a form is not affected by the use of jquery $.post

$('#com_form').submit(function(){ var ele = $(this); $.post("includes/agenda_com.php", { text : ele.find('textarea').val(), id : ele.find('#agenda_id').val(); }, fun ...

The CSS method for changing the content URL is experiencing difficulties in Firefox

Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...

Enhancing tables with jQuery AJAX

JavaScript function loadData() { var apiUrl = "/api/data"; inputValue=document.getElementById("inputField").value; $.ajax({ type: 'GET', url: apiUrl, data: "&inputValue=" +inputValu ...

Manipulate the control type property using jQuery

On my webpage, I have 5 grids and a single button. My goal is to enable users to click the button and resize the text within the grids. Can someone provide guidance on how this can be achieved using jQuery? ...

Alter the appearance of an alert message to appear on the screen using jQuery

Looking for some help with my calculator project. I'm trying to figure out how to display a number when it's clicked on, but all I can manage so far is an alert popping up. Here's the current code snippet: var add = function (x,y){ retu ...

What is the best way to execute a .js file with a Mocha suite repeatedly within a loop?

I have a collection of .js test files and I am looking for a way to execute the tests in each file multiple times. Ideally, I would like to run them 5 or 10 times consecutively. Even if it's just one file at a time, but running it multiple times. I a ...

How to insert a row above the header in an Excel sheet using JavaScript within

i am using excel js to export json data to excel. The json data is successfully exported to the sheet, but now I need to add a row that provides details of the sheet above the header text. for more details please refer image the code is shown below: i ...

Serve an image in Node.js from a location outside of the public folder

Is there a way to display an image that is located outside of the public folder in my webroot? Here is my directory structure: Webroot --core ----views ----public <- Stylesheets and other images are stored here ------index.ejs <- I want to display f ...

Issue with Jquery event not triggering correctly following ajax data retrieval

This script uses jQuery and Ajax to populate a navigation bar with categories and subcategories dynamically. The first unordered list is static, while the second one is populated after receiving data via Ajax. There are some jQuery events that need to be i ...

What strategies can be used to steer clear of overhyped products after adjusting state?

I have a function that retrieves data from Firebase. After getting the data, I want to set it into a state. So, I create an array and push all the data into it. Then, I update my state with this array. However, when I log or render this state, I encounter ...

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

Retrieve exclusively the latest entries from the mysql database

I could use a little assistance. I am looking to retrieve only the newest entry in my database without refreshing my page. I have a PHP page that can display all records from my database. For example, if someone inputs new data into the database, I would ...

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

Transforming a Bootstrap Background Image to a Captivating Video Display

Here is the CSS code snippet that I'm having trouble with: .masthead { position: relative; width: 100%; height: auto; min-height: 35rem; padding: 15rem 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75% ...

Making a REST API call with an ID parameter using Angular

I am currently working on an Angular application that interacts with a REST API. The data fetched from the API is determined based on the customer ID, for example: api/incident?customer_id=7. I am unsure of how to incorporate this into the API URL and serv ...

Guide on sending the API key to an API gateway through a request header with Jquery AJAX

I am facing an issue posting JSON data to an AWS API gateway that is protected by an API key. I managed to make the POST request successfully using Postman by adding the x-api-key header. However, I am struggling to achieve the same with JQuery code. How c ...