twitter/bootstrap — pull request #6830 by mdo (2013-02-07 23:57:30+00:00)
Title: Bootstrap 3 responsive modal

*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 `

` 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](https://f.cloud.github.com/assets/98681/137925/3808274e-7181-11e2-9781-1fa47e64953f.png)

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

![Screen Shot 2013-02-07 at 3 40 36 PM](https://f.cloud.github.com/assets/98681/137929/49d3a71e-7181-11e2-9fc1-1a8c05ebcb4b.png)

#### Todos

- [x] **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.