Modal is transitioning error with bootstrap4 alpha6 modal

javascript jquery modal-dialog bootstrap-4

15,678

Solution 1

The quickest solution is to remove the modal 'fade' class which is throwing this error. It seems to be a known issue of the Bootsrap v6 that will be fixed in a next released.

See here

Solution 2

Worked with removing fade from parent div class.

Final Modal code ( Adding here for posterity ) :

HTML

<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                    </div>
                    <div class="col-md-6">
                        <img src="ico/4.svg">
                    </div>
                </div>
              </div>
          </div>
    </div>

$.ajax({
        type: "GET",
        url: "/getTimeline",
        data: {
            'dateTime': selected
        },
        async: true,
        beforeSend: function () {
              $('#applemodal').modal({
                  backdrop: 'static',
                  keyboard: false
              });
        },
        success: function(data) {
            $('#applemodal').modal('toggle');
       }
});

15,678

CairoCoder

I majored in Bioinformatics but have a passion for User Experience and Web Development. Everything I know about UI, UE, CSS, HTML, jQuery, PHP and MySQL was all self taught by looking online and buying books and video tutorials related to UX and Web Development. I have been continuously employed since high school and throughout college, which helped ramp me to my current positions at RAViN Jeanswear. I'm also in love with my current position at RAViN Jeanswear as Senior Web Developer and Team Leader. I am discovering that I seriously enjoy user flow, User Experience and Web Development, and would like to transition my career towards this wire-framing and development path. I love figuring out what makes users tick and click, also I adore developing easy to use and smooth back-ends. I also am getting serious about my Web Design, so feel free to message me if you would like a web design, psd to html/css or anything else! I would currently like to learn (or get to know better): User Experience Research, SASS, HTML 5, jQuery/jQuery-UI, JavaScript, AJAX, IOS Development. ------- Interesting Points of Discussion ------- 1. What's more important? Creating a product to create fantastic metrics? Or creating a product that creates a "good feeling" and a lasting impression? 2. When should you use tables, and when should you use CSS? Always CSS for presentation, of course! But sometimes divititis will get you down. How do you get around that? 3. Find me a way to wrap a really long word (like supercalifragilisticexpialidocious) onto the next line of a 20px width div in CSS that works in all browsers. (?) 4. When to use CMS, and when to start a "From Scratch" website? Specialties: HTML Markup, CSS, User Experience, User Interface, Photoshop, Photography, Agile, JIRA, PHP, OOP, JavaScript, jQuery, PHP Frameworks.

Updated on June 04, 2022

Comments

CairoCoder almost 2 years
I am using bootstrap4 alpha 6 Modal, I am getting:
```
Error: Modal is transitioning
```
That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following:
```
function openModal(title, text) {
    $('.modal-title').text(title);
    $('.modal-body p').text(text);
    $('#modalAlert').modal('show');
}
```
I tried to use setTimeout function, but didn't work as in this article: https://github.com/twbs/bootstrap/issues/21687

Any suggestions?
rmcsharry almost 7 years

Could you perhaps explain what your code does? Thanks.
behz4d almost 7 years

has nothing to do with changing the DOM elements inside the modal, even when you don't change anything and try to open the modal multiple times when it's already open, the error happens