The animation for the Bootstrap modal is not functioning correctly

Whenever I click the button to open the modal window, it just pops up without any animation or fade effect.

I attempted to add classes like .fade and .modal-fade to the modal, but nothing changed.

You can see it in action on my test page. Simply click the "Jobb árat szeretnék" button.

<div class="modal modal-fade fade" tabindex="-1" role="dialog" id="AjanlatkeresModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Notification</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding-bottom:0">
        <p id="cart_added_msg"></p>
        <p id="cart_not_added_msg"></p>       
      </div>
      <div class="modal-footer">
          <button type="submit" id="kerdesButton" class="btn btn-primary"><a href="<?php echo $host; ?>/ajanlatkeres" title="Proceed to quote request">Proceed to quote request</a></button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer №1

Make sure to apply the following CSS and utilize the modalfade class instead of fade for your animations. This method involves manually creating a fade animation, so give it a try and see if it meets your needs.

.modalfade {
    animation: fadeIn 2s;
    -moz-animation: fadeIn 2s; /* Firefox */
    -webkit-animation: fadeIn 2s; /* Safari and Chrome */
    -o-animation: fadeIn 2s; /* Opera */
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadeIn { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

Is specificity a characteristic of JavaScript?

After setting a div in my HTML file to have a height of 100px and a width of 100px, I attempted to retrieve the height using JavaScript. This is what I tried: console.log(document.GetElementById("box").style.height); // The div had an ID of "box" and w ...

Generate a unique border using jQuery randomization techniques

I've been experimenting with creating a random number and having the border-radius of my div change on every pageload: <script> $(".card-body").each(function(){ var rand = Math.floor(Math.random() * 100) + 1; $(this).css( { borderRadius: rand ...

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...

Having four videos displayed on one webpage can cause the browser to function at a slower

I have videos that are around 30 seconds long and 15mbs. I'm wondering if it's feasible to include them on a page or if I should opt for cover images instead. I would like to use the video as a separator similar to the design showcased at Does a ...

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

"When the screen resolution changes, the absolute positioning of images won't function as expected

I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...

Hover Effects for CSS Info Boxes

I have a code snippet below for an info box I am working on. How can I adjust it so that when I hover over it, the green background fills the entire height instead of just 3/4 of the height? Any guidance on what may be causing this issue would be greatly ...

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Looking to add a company logo image to the top right corner of my R markdown report, and then shift the title down by 3 or 4 cm for a letterhead-like appearance. Does anyone have suggestions on how I can achieve this in my .Rmd file? Appreciate any assist ...

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

Cut out a passage by using a polyline shape

I am looking to create a unique effect by clipping a text like a heading1 using an svg polyline. The concept is to place the H1 text behind the polyline background and make it appear frosted or blurred. I have successfully achieved this in the past but see ...

How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with: <div class="class"> <h4 class="class2"> "Condition" </h4> <div class = "click_class">Click_text </div> </div> I need to click on the element with class ="click ...

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

I have implemented a data table from Vuetify in my project: <v-data-table :ref="`sortableTable${index}`" class="items-table-container" :headers="headers" :items="category.items" hide-default-footer> ...

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

Troubleshooting: Unresponsive behavior of CSS table

I have been working on implementing responsive CSS for a table. I recently came across a helpful tutorial on http://css-tricks.com/responsive-data-tables/ (How to create a responsive table using CSS). While the tutorial worked fine on some sample pages, I ...

Using an SVG filter to create a solid blue color overlay on an image

For a while now, I've been applying -webkit-filter: grayscale(100%); to render an image in grayscale. But recently, I've been wondering if it's possible to tint the image blue instead. My initial thought was to utilize an SVG filter and refe ...