Add a 'maxHeight' option to keep modals from extending past the screen.

[birds-inc]

I encountered an issue with modals that contain more content than is viewable
on the screen, or are viewed in on a small screen/browser window.

To get around this, I've added an option called maxHeight, which limits the
vertical percentage of the screen that the modal will take up. It has a default
value of null, which results in the current behavior. If you set it to a
decimal (i.e. 0.90 for 90%), it will take the following actions:

• Apply the max-height, overflow-x (hidden), and overflow-y (auto) properties to
  the modal before applying centering logic
• Create an event handler for the window.resize event that calls $.modal.resize
• Removes the handler on modal close

I've also updated the README and examples page accordingly.

There is one small issue introduced by maxHeight - the addition of overflow-y
may add a scroll bar to the modal, which can potentially cover up a close icon.
Since there's no way to place an element above the browser chrome, or other
universal positioning fix, handling this case is left as an exercise for the
user.

Intermediate commits:

Add example/test case

Add max-height if set, create handler to call resize on .resize event, still
need to figure out close icon

Update README.md accordingly

Re-minify with Closure Compiler with default options

We only need to set up maxheight and overflow properties on open(), not center()

Ensure positioning is fixed from the get-go and show element while we're centering (should not actually render)

Fix a little typo

Update minified js

[kylefox]

Nice addition. However it appears to obstruct the close button (see screenshot).

[birds-inc]

Yeah, I spent a good while dealing with that one. AFAICT the close button
is being covered up with the overflow browser chrome? Don't use the close
button myself so I only spent a couple hours trying to find a solution. Any
ideas?

On Tue, Jan 14, 2014 at 8:10 AM, Kyle Fox [email protected] wrote:

Nice addition. However it appears to obstruct the close button (see
screenshot).
[image: modal]https://f.cloud.github.com/assets/37838/1913316/298e8bae-7d47-11e3-84e6-937c8b2b5759.png

Reply to this email directly or view it on GitHubhttps://github.com//pull/67#issuecomment-32290522
.

[jonagoldman]

Personally, I styled the modal so the close button is inside, so for me its working great as you can see in the image the scroll bar together with the 'X' button, so thanks for this!

The only issue for me is that the scroll bar takes about 20 pixels of space, so the content space now is smaller and this can cause some issues when using elements with fixed witdh...

[tylertrotter]

I've added this code just inside the center function to address this problem. It just changes it from fixed to absolute and positions it correctly. That way it is scrollable.

if (this.$elm.outerHeight() >= $(window).height()) {
    var scrollTop = $(window).scrollTop();
    var position = 'absolute';
    var top = scrollTop + "px";
    var marginTop = '2em';
} else {
    var position = 'fixed';
    var top = "50%";
    var marginTop = -(this.$elm.outerHeight() / 2);
}

[kylefox]

Resolved by #110