force: true ignores close function of closed modal

[pedroadame]

Hi @anseki,

I have one modal that lets me open another modal. When this occurs, the first modal should be closed force: true specified on the second modal, but the close function of the first modal (which animates the closing of the modal using animate.css) is ignored, the modal just disappears.

Any workaround for this? Or what I'm missing?

Modal:

$modal.plainModal('open', {
  overlay: {
    fillColor: '#FFF',
    opacity: 0.8
  },
  duration: 250,
  effect: {
    open: function(duration, complete){
      $(this).animateCSS('zoomIn',{
        callback: complete,
        duration: duration,
      });
    },
    close: function(duration, complete){
      $(this).animateCSS('zoomOut',{
        callback: complete,
        duration: duration,
      });
    },
  }
});

The second modal is the same, just with force: true appended at the end.

[anseki]

Hi @pedroadame, thank you for the comment.

There are multiple plugins that are called "jQuery.animateCSS", and I don't know which one you use. The effect accepts functions that work like standard effect methods of jQuery. Try this:

  effect: {
    open: function(duration, complete){
      console.log('effect.open was called.');
      this.css('display', 'block');
      setTimeout(function() {
        console.log('effect.open completes.');
        complete();
      }, duration);
    },
    close: function(duration, complete){
      console.log('effect.close was called.');
      this.css('display', 'none');
      setTimeout(function() {
        console.log('effect.close completes.');
        complete();
      }, duration);
    }
  }

[pedroadame]

I use this one: https://github.com/craigmdennis/animateCSS

I'll try that tomorrow at work.

[anseki]

I see. Because that plugin does not hide the element (the zoomOut class is removed after animation), try this:

  effect: {
    open: function(duration, complete) {
      this.animateCSS('zoomIn', {
        callback: complete,
        duration: duration
      });
    },
    close: function(duration, complete) {
      this.animateCSS('zoomOut', {
        callback: function() { this.hide(); complete(); },
        duration: duration
      });
    }
  }

[pedroadame]

My idea is the following: Open first modal -> First modal closes with animation -> Second modal opens after closing animation finishes

I'll try that tomorrow at work, and I'll get in touch with you.

[anseki]

You can use plainmodalclose event for the behavior you want. For example:

$('#first').on('plainmodalclose', function(event) {
  $('#second').plainModal('open');
});

However, please create a new issue about that behavior if you want, don't comment here because this is the issue about the ignored effect.close. Also, please close this issue after confirm that the effect.close is not ignored (i.e. the issue was solved).

[pedroadame]

This effectively shows the close animation is called,

  effect: {
    open: function(duration, complete){
      console.log('effect.open was called.');
      this.css('display', 'block');
      setTimeout(function() {
        console.log('effect.open completes.');
        complete();
      }, duration);
    },
    close: function(duration, complete){
      console.log('effect.close was called.');
      this.css('display', 'none');
      setTimeout(function() {
        console.log('effect.close completes.');
        complete();
      }, duration);
    }
  }

And this doesn't solve my issue, but I'm closing since the close effect is not ignored in fact.

effect: {
    open: function(duration, complete) {
      this.animateCSS('zoomIn', {
        callback: complete,
        duration: duration
      });
    },
    close: function(duration, complete) {
      this.animateCSS('zoomOut', {
        callback: function() { this.hide(); complete(); },
        duration: duration
      });
    }
  }

However, this solved my issue.

$('#first').on('plainmodalclose', function(event) {
  $('#second').plainModal('open');
});

[anseki]

😄