Option to Synchronize Modal Backdrop and Dialog Transitions

[smkbd]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Currently, the Bootstrap modal with the fade option introduces a slight delay between the appearance of the backdrop and the modal dialog. When opening a modal with a 1s fade transition, the backdrop transition starts first and takes 1s, and once it completes, the modal dialog starts appearing with another 1s transition. This results in a total delay of 2s before the dialog is fully visible. Similarly, when closing the modal, the reverse happens: the modal dialog disappears first, followed by the backdrop.

Proposed Feature

I propose adding an option to allow users to control whether the backdrop and modal dialog transitions are staggered (the current behavior) or occur simultaneously. This feature would give developers the flexibility to choose between the default behavior or having both the backdrop and dialog appear/disappear at the same time, enhancing the control over modal transition timing.

Technical Details

The current behavior is implemented in the Modal class (js/src/modal.js), where the show() method of the _backdrop class is called before the modal dialog itself is displayed, with the dialog appearance controlled via a callback function passed to _backdrop.show().

// js/src/modal.js
show(relatedTarget) {
    
  ...
  
  this._backdrop.show(() => this._showElement(relatedTarget));
}

Backdrop Appearance: When modal.show() is called, the _backdrop.show() method is executed first, and a callback is provided to begin showing the modal dialog only after the backdrop has completed its transition.

Suggested Modification: Introduce a new configuration option (e.g., syncBackdropModal) in the Modal class. When this option is true, the backdrop and modal dialog would transition simultaneously. This could be implemented by starting both the backdrop and modal dialog transitions together in the show() method without waiting for the callback from the backdrop transition.

Closing Behavior: For modal closing, a similar approach should be applied to allow simultaneous transitions for both the backdrop and modal dialog. The closing behavior currently relies on the reverse process, but further investigation is needed to confirm the exact sequence in which the modal dialog and backdrop are hidden.

Motivation and context

If the proposed feature is implemented, it will add the following advantages-

1. Offers developers more control over the visual flow of modal dialogs.
2. Improves the UX in cases where simultaneous transitions may be more visually appealing or in line with design requirements.
3. Keeps the existing default behavior intact for backward compatibility.