Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Modal improvements #503

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Modal improvements #503

wants to merge 1 commit into from

Conversation

Atmos4
Copy link

@Atmos4 Atmos4 commented Mar 29, 2024

Scrolling improvements

  • overflow on modal instead of article
  • prevent body overflow when modal is open

Animations

  • animations on open and close. Uses allow-discrete to prevent the modal from being focusable when closed. Browser support is low but non-support will just result in graceful degradation (no animation on closing modal).

This PR is more of a POC. I can split it into 2 PRs, one for the scrolling and one for the animations.

I am also unsure which animations I should include. Maybe it is just safer to explain in the docs how to add animations easily rather than enforcing specific animations.

- overflow on modal instead of article
- animations
- prevent body overflow when open modal
@lucaslarroche
Copy link
Member

@Atmos4, thanks a lot! And sorry for the delay.

I like the change to move overflow to the modal instead of the inner article. We can keep everything in one PR.

I wasn’t familiar with allow-discrete — does it allow entry and exit animations without JS? (Ref: modal.js)

For animations, we should stick to the existing ones defined in the utility classes: .modal-is-opening and .modal-is-closing.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants