Skip to content
GitLab

Bootstrap 3 responsive modal

Merged Mark Otto requested to merge bs3_modal into 3.0.0-wip

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 use position: 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:

Screen Shot 2013-02-07 at 3 40 32 PM

And on screens that are at least 786px wide (portrait iPad and up):

Screen Shot 2013-02-07 at 3 40 36 PM

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.