10 examples of 'modal backdrop fade show problem' in JavaScript

308
protected showBackdrop(callback?: Function): void {
309
  if (
310
    this._isShown &&
311
    this.config.backdrop &&
312
    (!this.backdrop || !this.backdrop.instance.isShown)
313
  ) {
314
    this.removeBackdrop();
315
    this._backdrop
316
      .attach(ModalBackdropComponent)
317
      .to('body')
318
      .show({ isAnimated: this.isAnimated });
319
    this.backdrop = this._backdrop._componentRef;
320
321
    if (!callback) {
322
      return;
323
    }
324
325
    if (!this.isAnimated) {
326
      callback();
327
      return;
328
    }
329
330
    setTimeout(callback, BACKDROP_TRANSITION_DURATION);
331
  } else if (!this._isShown && this.backdrop) {
332
    this.backdrop.instance.isShown = false;
333
334
    const callbackRemove = () => {
335
      this.removeBackdrop();
336
      if (callback) {
337
        callback();
338
      }
339
    };
340
341
    if (this.backdrop.instance.isAnimated) {
342
      this.timerRmBackDrop = setTimeout(callbackRemove, BACKDROP_TRANSITION_DURATION);
343
    } else {
344
      callbackRemove();
345
    }
346
  } else if (callback) {
347
    callback();
348
  }
349
}

96
_hideBackdrop(): void {
97
  if (!this.backdropRef) {
98
    return;
99
  }
100
  this.backdropRef.instance.isShown = false;
101
  const duration = this.config.animated ? TRANSITION_DURATIONS.BACKDROP : 0;
102
  setTimeout(() => this.removeBackdrop(), duration);
103
}

205
animateBackdropClose() {
206
  if (this.state.isAnimateBackdrop && this.state.animBackdrop) {
207
    this.state.animBackdrop.stop();
208
  }
209
  this.setState({isAnimateBackdrop: true});
210
211
  let animBackdrop = Animated.timing(this.state.backdropOpacity, {
212
    toValue: 0,
213
    duration: this.props.animationDuration,
214
    easing: this.props.easing,
215
    useNativeDriver: this.props.useNativeDriver
216
  }).start(() => {
217
    this.setState({
218
      isAnimateBackdrop: false,
219
      animBackdrop
220
    });
221
  });
222
}

494
function UI_show_backdrop() {
495
    $('#global-backdrop').show();
496
}

32
openWindowWithoutBackdrop() {
33
  this.windowService.open(
34
    this.disabledEscTemplate,
35
    { title: 'Window without backdrop', hasBackdrop: false, closeOnEsc: false },
36
  );
37
}

218
leaveAnimation() {
219
  if (this.option.animated) {
220
    if (this.option.transparent) {
221
      if (this.setLeaveActiveName(this.option.transitionName)) {
222
        this.transitionName = this.setLeaveActiveName(this.option.transitionName);
223
        this.maskTransitionName = this.setLeaveActiveName(this.option.maskTransitionName);
224
      } else {
225
        this.transitionName = this.maskTransitionName = this.setLeaveActiveName('am-fade');
226
      }
227
    } else {
228
      if (this.setLeaveActiveName(this.option.transitionName)) {
229
        this.transitionName = this.setLeaveActiveName(this.option.transitionName);
230
        this.maskTransitionName = this.setLeaveActiveName(this.option.maskTransitionName);
231
      } else {
232
        this.transitionName = this.maskTransitionName = this.setLeaveActiveName('am-slide-up');
233
      }
234
    }
235
    if (this.option.popup) {
236
      this.transitionName =
237
        this.option.animationType === 'slide-up'
238
          ? this.setLeaveActiveName('am-slide-up')
239
          : this.setLeaveActiveName('am-slide-down');
240
      this.maskTransitionName = this.setLeaveActiveName('am-fade');
241
    }
242
  }
243
  setTimeout(() => {
244
    this.option.visible = false;
245
    if (this.onChanged) {
246
      this.onChanged(this.option.visible);
247
    }
248
  }, 200);
249
}

447
private _showBackdrop(): void
448
{
449
    // Create the backdrop element
450
    this._backdrop = this._renderer.createElement('div');
451
452
    // Add a class to the backdrop element
453
    this._backdrop.classList.add('fuse-sidebar-overlay');
454
455
    // Add a class depending on the invisibleOverlay option
456
    if ( this.invisibleOverlay )
457
    {
458
        this._backdrop.classList.add('fuse-sidebar-overlay-invisible');
459
    }
460
461
    // Append the backdrop to the parent of the sidebar
462
    this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop);
463
464
    // Create the enter animation and attach it to the player
465
    this._player =
466
        this._animationBuilder
467
            .build([
468
                animate('300ms ease', style({opacity: 1}))
469
            ]).create(this._backdrop);
470
471
    // Play the animation
472
    this._player.play();
473
474
    // Add an event listener to the overlay
475
    this._backdrop.addEventListener('click', () => {
476
            this.close();
477
        }
478
    );
479
480
    // Mark for check
481
    this._changeDetectorRef.markForCheck();
482
}

73
show(): void {
74
  this.headerText = 'Errors and Warnings - Current Active Mapping';
75
  this.message = '';
76
  this.visible = true;
77
  setTimeout(() => {
78
    this.fade = true;
79
  }, 100);
80
}

489
private _hideBackdrop(): void
490
{
491
    if ( !this._backdrop )
492
    {
493
        return;
494
    }
495
496
    // Create the leave animation and attach it to the player
497
    this._player =
498
        this._animationBuilder
499
            .build([
500
                animate('300ms ease', style({opacity: 0}))
501
            ]).create(this._backdrop);
502
503
    // Play the animation
504
    this._player.play();
505
506
    // Once the animation is done...
507
    this._player.onDone(() => {
508
509
        // If the backdrop still exists...
510
        if ( this._backdrop )
511
        {
512
            // Remove the backdrop
513
            this._backdrop.parentNode.removeChild(this._backdrop);
514
            this._backdrop = null;
515
        }
516
    });
517
518
    // Mark for check
519
    this._changeDetectorRef.markForCheck();
520
}

60
onShow() {
61
    this._showd = true;
62
    if (this.time > 0) {
63
        this.timer = setTimeout(() => {
64
            this.onHide();
65
        }, this.time);
66
    }
67
    return this;
68
}