twitter/bootstrap — pull request #4403 by lookfirst (2012-08-15 01:26:27+00:00)
Title: Absolute based modal

This is a wip on an absolute based modal which I think is a much better long term solution to developing a modal for bootstrap.

This fixes a lot of issues with the existing modals for people who want to have more control over how they are displayed. Some benefits of an absolute based modal:

1. You have more control over stacking. In other words, if you need to open up a modal within a modal, the z-indexing works better. This is because I pull the modal (and background) out of the dom and shove it at the top of the body (and even put it back when it is hidden).
2. It is possible to fix the background scrolling issue.
3. With the window.scroll handler, it is possible to center the modal in the window when it is resized.
4. I disliked the scrolling within the modal. I'd rather that the whole window scrolls. This also makes long modals possible.
5. It is possible to set a data-top attribute on the modal and specify that you want the modal to start off X pixels from the stop of the window instead of centered.
6. The css is simpler imho.

There is a couple issues with my implementation that I'd like some comments/help on.

1. The fade effect isn't working 100%. When you first open the modal, the slide down effect doesn't work that well. If you close the modal and re-open it (without refreshing the page), it works better. I'm sure this is just a timing issue of where I'm setting the top of the modal, but I haven't been able to figure it out yet.
2. The responsive stuff isn't working as well as I'd like and in fact, I just deleted it. I don't need my modals to be super responsive and I'm not quite sure how all that stuff should work.
3. For people who do want the scrolling within the modal, we need to find a way to add that back again.

Consider this a WIP. I'm not even sure if @fat will like this at all. I'd like constructive feedback and suggestions for improvement.

references issues: #3353, #4379, #3361, #3217, #407