Avoid inline styles in v5 modals

[sgilberg]

Prerequisites

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

Proposal

I know development is focused on v6, but not knowing the timeline for its release, we are hoping to tighten our security posture while using v5. As part of this, we'd like to disallow the use of inline styles with our CSP, but modals are a sticking point. Currently they add style="display: block" when the modal is shown and switch to style="display: none" when it is hidden.

I think there would be a way to update this in a non-breaking way to allow Bootstrap v5 users to optionally use d-block and d-none classes for show and hide.

In the Modal component, instead of:

_showElement(relatedTarget) {
    // etc
    this._element.style.display = 'block';
    // etc
}

doing:

_showElement(relatedTarget) {
    // etc
    if (this._element.classList.contains('d-none')) {
        this._element.classList.remove('d-none');
        this._element.classList.add('d-block');
    } else {
        this._element.style.display = 'block';
    }
    // etc
}

And instead of:

_hideModal() {
    this._element.style.display = 'none';
    // etc
}

doing:

_hideModal() {
    if (this._element.classList.contains('d-block')) {
        this._element.classList.remove('d-block');
        this._element.classList.add('d-none');
    } else {
        this._element.style.display = 'none';
    }
    // etc
}

This way if a user had d-none on their modal it would bypass inline styles and use those display classes, but if not there would be no change in existing functionality.

I wasn't sure if this repo is still accepting PRs for v5, so I didn't want to go through the trouble of forking, testing, etc if these aren't currently considered. But I'm happy to try one if it would be considered (would it still use main as the base branch? It looks like that's >100 commits ahead of the latest release). I'm happy to see that v6 has refactored to use native dialog so this isn't an issue.

Motivation and context

As AI is emboldening hackers with malicious intent, and attacks are getting more and more sophisticated, security is more important now than ever. This change helps Bootstrap users tighten their security posture with CSP while still being able to use Bootstrap Modals in v5.