MODAL - DYNAMIC HEIGHT BY CONTENT CHANGES

by bizamajig

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<a href="#modal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        
<h3 id="ModalLabel"></h3>

    </div>
    <div class="modal-body">
        <section id="global-nav">
            <nav>
                <div class="constrain">
                    <ul class="projects">
                        <li class="project jquery"><a href="http://jquery.com/" title="jQuery">jQuery</a>
                        </li>
                        <li class="project jquery-ui"><a href="http://jqueryui.com/" title="jQuery UI">jQuery UI</a>
                        </li>
                        <li class="project jquery-mobile"><a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a>
                        </li>
                        <li class="project sizzlejs"><a href="http://sizzlejs.com/" title="Sizzle">Sizzle</a>
                        </li>
                        <li class="project qunitjs"><a href="http://qunitjs.com/" title="QUnit">QUnit</a>
                        </li>
                    </ul>
                    <ul class="links">
                        <li><a href="http://plugins.jquery.com/">Plugins</a>
                        </li>
                        <li class="dropdown"><a href="http://contribute.jquery.org/">Contribute</a>

                            <ul>
                                <li><a href="http://contribute.jquery.org/cla/">CLA</a>
                                </li>
                                <li><a href="http://contribute.jquery.org/style-guide/">Style...

CSS

.modal-dialog{
    position: relative;
    display: table; //This is important 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

JavaScript

$('#modal').on('show', function () {
//	USE OUR CSS,
//
//	OR
//$('.modal-body',this).css({width:'auto',height:'auto', 'max-height':'100%'});
//
//	OR
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
});