How To Auto Height JQuery Modal Window

This post is about JQuery’s modal() function and not the dialog() function. There is the common problem that when the content is long, the height of the modal window does not automatically adjust based on content height.

To bypass this problem, you need to listen to the show event and resize the modal window. This is how to do it.

This code sets the width to auto as well. However, you can change the width value however you see fit and the height will still auto-adjust itself once the show() function is called.

If you noticed in the code, the max-height attribute is set to 100%. If your content is too long, chances are your modal window will be displayed beyond the screen height. To ensure that the height stays within the display screen height, you can use this value instead:

Where 0.8 means 80% of the window screen height.

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *