Modal resize

Ajuste de mola en window resize

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" 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="myModalLabel">Modal headerr</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum viverra erat at luctus. Aenean suscipit dictum gravida. Pellentesque ut nibh et elit sodales viverra. Morbi ac sodales turpis. Etiam feugiat sollicitudin lacus eget fermentum.
      Cras metus metus, cursus quis facilisis sit amet, elementum facilisis sapien. Aenean tristique aliquam nibh, vel ornare felis iaculis ut. Morbi arcu nisl, elementum consectetur molestie quis, semper eget sem. Mauris non commodo diam, et dignissim
      justo. Fusce sit amet neque eros. Quisque ornare dui ut quam euismod, at bibendum tortor blandit. Donec sit amet iaculis lorem, id lacinia eros. Sed vel rutrum sapien, id gravida eros. Sed massa leo, blandit ut tempor at, consequat eget lacus. Nullam
      laoreet arcu eu tempus dapibus. Ut tincidunt, libero sed efficitur hendrerit, ante nunc fermentum magna, vel vehicula elit est eu massa. Praesent finibus purus at massa faucibus dictum. Phasellus feugiat augue ac ipsum auctor, molestie fringilla
      diam lacinia. Etiam velit nisl, tempus at semper sodales, luctus a elit. Aliquam porta lectus elit. Nulla facilisi. Nullam sed dui lorem. Donec volutpat lorem tristique magna fringilla, eu pulvinar tortor aliquet. Ut eget...

JavaScript

$(document).ready(function() {

  $('#myModal').on('shown', function() {
    var modalActual = $(this);
    ajustaModal(modalActual);
    
    var debouncedModal = _.debounce(ajustaModal, 150);
    $(window).resize(function(){
    	debouncedModal(modalActual);
    });
  });
  
  $('#myModal').on('hidden', function () {
    console.log("chao");
    console.log(debouncedModal);
	});
});

function ajustaModal(modalSelector) {
console.log("llamando...");
 	var isAjusted = false;
  var altoHeader = modalSelector.find('.modal-header').outerHeight();
  var altoFooter = modalSelector.find('.modal-footer').outerHeight();
  var altoWindow = $(window).outerHeight();
  var nuevoHeight = (altoWindow - (40 + altoHeader + altoFooter + (altoWindow * 0.1)));

  $(modalSelector).find('.modal-body').css({
    'height': nuevoHeight,
    'overflow-y': 'scroll'
  });
}