Bootstrap Dynamic modal; hight

by Damith Nuwan Sampath

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 Guides</a>
                </li>
                <li><a href="http://contribute.jquery.org/triage/">Bug Triage</a>
                </li>
                <li><a href="http://contribute.jquery.org/code/">Code</a>
                </li>
                <li><a...

JavaScript

$('#modal').on('show', function() {
  $('.modal-body', this).css({
    width: 'auto',
    height: 'auto',
    'max-height': '100%'
  });
});