arahaya/bootstrap-fluidmodal.js

## bootstrap-fluidmodal.js
(function ($) {
  $(function () {
    function update() {
      var width = $(window).width();
      var height = $(window).height();

      $('.modal-fluid').css({
        width: width * 0.8,
        marginLeft: -(width * 0.4)
      });

      $('.modal-fluid .modal-body').css({
        maxHeight: (height * 0.8) - 136
      });

      $('.modal-fluid').each(function () {
        $(this).css({
          marginTop: -($(this).height() / 2),
        });
      });
    }

    $(window).resize(update);
    update();
  });
}(window.jQuery));

## example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
</head>
<body>
<div id="myModal" class="modal hide fade modal-fluid">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal Heading</h3>
  </div>
  <div class="modal-body">
    <h4>Text in a modal</h4>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

    <h4>Popover in a modal</h4>
    <p>This <a href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

    <h4>Tooltips in a modal</h4>
    <p><a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

    <hr>

    <h4>Overflowing text to show optional scrollbar</h4>
    <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-fluidmodal.js"></script>
<script>
$(function () {
  $('#myModal').modal();
});
</script>
</body>
</html>
	(function ($) {
	$(function () {
	function update() {
	var width = $(window).width();
	var height = $(window).height();

	$('.modal-fluid').css({
	width: width * 0.8,
	marginLeft: -(width * 0.4)
	});

	$('.modal-fluid .modal-body').css({
	maxHeight: (height * 0.8) - 136
	});

	$('.modal-fluid').each(function () {
	$(this).css({
	marginTop: -($(this).height() / 2),
	});
	});
	}

	$(window).resize(update);
	update();
	});
	}(window.jQuery));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	</head>
	<body>
	<div id="myModal" class="modal hide fade modal-fluid">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal">×</button>
	<h3>Modal Heading</h3>
	</div>
	<div class="modal-body">
	<h4>Text in a modal</h4>
	<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

	<h4>Popover in a modal</h4>
	<p>This <a href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

	<h4>Tooltips in a modal</h4>
	<p><a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

	<hr>

	<h4>Overflowing text to show optional scrollbar</h4>
	<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
	</div>
	<div class="modal-footer">
	<a href="#" class="btn" data-dismiss="modal">Close</a>
	<a href="#" class="btn btn-primary">Save changes</a>
	</div>
	</div>
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-fluidmodal.js"></script>
	<script>
	$(function () {
	$('#myModal').modal();
	});
	</script>
	</body>
	</html>