New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal with dynamic content does not close if animation is active #23604

Open
bluesurfer opened this Issue Aug 21, 2017 · 10 comments

Comments

Projects
None yet
5 participants
@bluesurfer
Copy link

bluesurfer commented Aug 21, 2017

I have upgraded to Bootstrap 4 Beta from Alpha 6 and I am using jQuery 3.2.1 to dynamically populate the content of a modal. Here's the JS code inspired from the docs.

    var $modal = $('#modal');

    $modal.on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var target = button.data('url');
        if (target) {
            $modal.load(target, function () {
                $modal.find('input:visible:first').focus();
            });
        }
    });

And here's the HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal" data-url="/foo">Open modal</button>

<div class="modal" id="modal" tabindex='-1' role="dialog" aria-labelledby="modal" aria-hidden="true"></div>

This works fine but if I add the fade class then the animation effect works but there's no way to close the modal. I had similar problem with Alpha 6 (see #22906)

@Johann-S Johann-S added js v4 labels Aug 21, 2017

@InvisaMage

This comment has been minimized.

Copy link

InvisaMage commented Aug 25, 2017

I have the same problem.

@Seika85

This comment has been minimized.

Copy link

Seika85 commented Oct 9, 2017

I have the exact same issue. I also had the "Modal is transitioning" Error with Alpha-6.

I don't know if it helps, but I debugged bootstrap itself a bit and found out that transitionComplete() is never called and therefor _isTransitioning is never reset - even though transitionEndEmulator() is called.
I tried adding a callback to its function parameter and added the callback call to the setTimout. Then I just needed to add the respective callback to the call of emulateTransitionEnd and it worked.

I don't know if it's "good" what I did, but I hope someone can at least use it to spot the actual issue better than me.

@bluesurfer

This comment has been minimized.

Copy link

bluesurfer commented Oct 24, 2017

@Johann-S @Seika85 @InvisaMage

At the end I manage to make this work (tested on Beta 2). Adding modal-dialog and changing the event to shown.bs.modaldid the trick.

    <div class="modal fade" id="modal" tabindex='-1' role="dialog" aria-labelledby="modal" aria-hidden="true">
        <div class="modal-dialog" role="document">
        </div>
    </div>
    // Vary modal content based on trigger button
    $modal.on('shown.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var target = button.data('url');
        if (target) {
            $modal.load(target, function () {
                $modal.find('input:visible:first').focus();
            });
        }
    });

And here the target url returns the HTML enclosed in modal-dialog tags.

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Oct 24, 2017

So is it a fixed issue for you @bluesurfer ?

@bluesurfer

This comment has been minimized.

Copy link

bluesurfer commented Oct 24, 2017

@Johann-S

Seems a hack to me but it works. So, I guess it is fixed? It's up to you :)

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Oct 25, 2017

I made a Codepen with our latest release (beta 2) and it works fine see : https://codepen.io/Johann-S/pen/KXOPPj?editors=1010#0

without using shown event 😉

@ConorSheehan1

This comment has been minimized.

Copy link

ConorSheehan1 commented Dec 28, 2017

Looks like this issue or something similar is on the getbootstrap website on the Tooltips and popovers modal. If you go to https://v4-alpha.getbootstrap.com/components/modal/#tooltips-and-popovers
once you open the modal and click This button triggers a popover on click.
the modal can no longer be closed. Exception in the console is Uncaught Error: Modal is transitioning

(On Google Chrome 60.0.3112.78, centos 7)

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Dec 31, 2017

We are on Beta 3 @ConorSheehan1 so you should update your Bootstrap version 😉

@bluesurfer

This comment has been minimized.

Copy link

bluesurfer commented Jan 2, 2018

@Johann-S

I made a Codepen with our latest release (beta 2) and it works fine see : https://codepen.io/Johann-S/pen/KXOPPj?editors=1010#0
without using shown event 😉

This is slightly different: you are using the modal-body element to populate the modal. One, instead, may want to dynamically change the modal-dialog in order to control the size of the modal using modal-sm/md/lg. And that still does not work with the show event - you cannot close modal once it gets shown (tested on beta-3).

The only thing that seem to work is my hack and I am not using it 😄 (I preferred to disable the fade effect).

@Johann-S Johann-S removed the awaiting reply label Jan 2, 2018

@bluesurfer

This comment has been minimized.

Copy link

bluesurfer commented Jan 26, 2018

@Johann-S

I was looking back to this issue in my project and I think I finally come up with a clean solution using jQuery and data attributes:

    let $modal = $('#modal');

    // Vary modal content based on trigger button
    $modal.on('show.bs.modal', (e) => {
        let button = $(e.relatedTarget),
            target = button.data('url'),
            size = button.data('size') || 'modal-md';
        $modal.find('.modal-dialog').addClass(size);
        $modal.find('.modal-content').load(target);
    });

So for me this is closed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment