Can't close modal box in Firefox 42.0 (Mac)

[heyalbert]

I can click on the close icon and/or the darker shadow outside and nothing will happen.

The close button just do not work. Any help? :-)

[dylantuohy]

+1

[notflip]

+1

[vodkabears]

What?

[darknit3]

I was able to fix it and make it work for me by changing all of the .close() calls in the JS file to .destroy(). The .close() calls are not working at all on Firefox.

[1ucay]

Becase in Firefox modal return via getState "opening" instead "opened" :(

$('.remodal-close').on('click', function(e) {
    console.log(calcmore.getState());
});

[1ucay]

Problem was in CSS, if I have animation name in quotation marks "" @keyframes "remodal-overlay-closing-keyframes"

[lnkyan]

In my code, I wrote the remodal html code in a vue component. Then the handleAnimationStart in the syncWithAnimation function was called twice in Firefox, so the opening state is never change to opened. When I moved the remodal html code out of my vue componenet, every thing is work fine

[waltercruz]

in my tests, the modal stays in status remodal-is-opening when opened on firefox (Firefox 48 here)

[waltercruz]

And this is the cause of the problem.

in the close function there is a:

// Check if the animation was completed if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) { return; }

So, as the state on firefox is keeping on OPENING, the modal never closes. There's something on syncWithAnimation that is not working well.

In my code, I'm opening modal by an onclick event. Don't know if this is what is affecting the modal (I'm not using # tracking). I have a attr-name that is the 'clean-url' and i use this attribute to find the right modal (a lot of hidden modals in the same page).

$('.open-modal').click(function(){ history.pushState(null, null, $('body').data('home')+ '/central-de-midia/'+$(this).data('attr-name') + '/'); var id = $(this).data('attr-name'); var modal_name = '[data-remodal-id='+id+']'; var inst = $(modal_name).remodal({ hashTracking: false }).open(); return false; })

[waltercruz]

Hum... It's like on firefox handleAnimationStart is executed twice, so runningAnimationsCount is 2, and when handleAnimationEnd executes, it never gets down to 0, and never executes doAfterAnimation, and the status don't change from OPENING to OPENED.

[dickrogers]

Same issue here on FF45/Win10.

[calosth]

Same issue. Firefox 48. Anybody found a solution?

[calosth]

I fixed the bug setting up the 'opened' state explicitly on opening event var inst = $('[data-remodal-id=modal]').remodal(); $(document).on('opening', '.remodal', function () { inst.state = 'opened'; });

[waltercruz]

Here's a codepen that fails with some versions of firefox (tested with 42 and 48). Some similar things seems to happen on Microsoft Edge.

http://codepen.io/waltindead/pen/dOOVMg

Suppose that I want to bring some content through ajax. I put the ajax call on remodal opening. But, due to ajax asynchronicity, the modal would open empty, and be filled with content after, causing a strange behaviour. To minimize this, I put a hide() on opening start and a show on ajax end. These calls seems to unbalance the counting on syncWithAnimation, so the opened modal gets stuck in 'is-opening' status.

Simplest solution: upgrade firefox :) (works better on firefox 50).

Other solution: use (modal).css('display','none') and css('display','block').

I know that remodal is meant to be simple, but an 'official' way to get ajax content would be a nice thing to be added.

[fangnan124]

It is happened when I close a remodal, then immediately open another one. $('#A').close() $('#B').open() now the B is in state 'remodal-is-opening' if I don't explicitly close A, then the B will be in state 'remodal-is-opened', and everything is work fine. so the solution for now is not explicitly close remodal before open another one?