This is likely a throwaway pull request, but I wanted to gather some thoughts outside of the gigantic BS3 pull request.
Some context
We've know for a long time that we're shitting the bed when it comes to modals, and that's super lame because we've implemented pretty snazzy ones elsewhere (like those on Twitter.com).
This branch introduces a quick test file with new markup and styles for a super basic, responsive, mobile-first modal. It's not anywhere near complete as it doesn't really touch any JS behavior, but I want to start capturing feedback.
Key changes
Summarizing what I've changed in code, here's the low down:
- As BS3 is mobile-first, this new modal also starts at the mobile level and scales up via media queries.
- Reintroduces
.modal-open
on the body (so we can nuke the scroll there) - Adds a couple extra levels of markup (namely
.modal-dialog
and.modal-content
) so we can scroll the entire modal rather than overflow a section within the modal. - Related,
.modal
is now the wrapper, and.modal-content
is the modal itself. This is so we can still useposition: fixed;
, but make the modal relatively positioned so that scrolling moves the entire modal, not something with it. - Added a
.modal-title
for more consistent and useful targeting of the heading content (previously this was just an<h3>
and selector performance wise that sucked).
That about covers most of the changes. Check out modals.less and new-modal.html to see the changes in more detail.
Screenshots
Here's what the modal looks like on narrow screens:
And on screens that are at least 786px wide (portrait iPad and up):
Todos
-
Test on iOS6. After testing, scrolling performance looks great with the position: fixed;
always included on iPhone 5. -
Test on iOS5. Not sure if we need to go older, but I want to check here to see how well fixed is supported. -
Test on Android devices (including native browser and Chrome). I only have a year-old Nexus lying around, so might need help tracking down bugs on older devices. -
Add modal size variations (small, large, etc) perhaps? -
Redo modals everywhere to use the new markup if need be. -
Update docs to reflect changes,
/cc @jschr, who has a decent amount of experience with the current modal's shortcomings. Jordan, any thoughts you have on this approach and your experiences would be boss.