diff --git a/index.html b/demo.html
similarity index 91%
rename from index.html
rename to demo.html
index 5b14926..e89385c 100644
--- a/index.html
+++ b/demo.html
@@ -116,7 +116,17 @@ <h3>Long Modals</h3>
           </div>
           <br />
 
-		    </div>
+          <div class="reposition">
+  				  <h3>Fit, flow & Reposition</h3>
+  				  <pre class="pre-scrollable prettyprint linenums" data-source="#reposition">
+  				  </pre>
+  				  <div class="text-center">
+  					<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#reposition">View Demo</button>
+  				  </div>
+  				</div>
+  				<br />
+
+          </div>
 	    </div>
 	  </div>
 		
@@ -280,6 +290,29 @@ <h3>A Very Long</h3>
 </div>
 
 <div id="ajax-modal" class="modal hide fade" tabindex="-1"></div>
+
+<div id="reposition" class="modal hide fade modal-fit modal-reposition" tabindex="-1">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Fit, flow & reposition</h3>
+  </div>
+  <div class="modal-body">
+    <div>
+      <button class="btn" data-toggle="collapse" data-target="#showimg" onclick="$('#reposition').trigger('change.modal')">Click me</button>
+    </div>
+    <div id="showimg" class="collapse">
+      <div class="text-right">
+        <button class="btn" data-toggle="modal-fit" data-target="#reposition">Fit or flow</button>
+      </div>
+      <img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
+    <button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
+  </div>
+</div>
+
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
     <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index c125bd5..fbe9ecf 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -104,6 +104,11 @@
 			var prop = this.options.height ? 'height' : 'max-height',
 				value = this.options.height || this.options.maxHeight;
 
+			if (!value && this.$element.hasClass('modal-fit')){
+				value = function(){return $(window).height() - 165}
+				prop = 'max-height';
+			}
+
 			if (this.options.width){
 				this.$element.css('width', this.options.width);
 
@@ -122,11 +127,12 @@
 
 			this.$element.find('.modal-body')
 				.css('overflow', '')
-				.css(prop, '');
+				.css('max-height', '')
+				.css('height', '');
 
 			var modalOverflow = $(window).height() - 10 < this.$element.height();
 
-			if (value){
+			if (value && !this.$element.hasClass('modal-flow')){
 				this.$element.find('.modal-body')
 					.css('overflow', 'auto')
 					.css(prop, value);
@@ -141,6 +147,10 @@
 					.css('margin-top', 0 - this.$element.height() / 2)
 					.removeClass('modal-overflow');
 			}
+      
+			this.$element.data('modalheight',this.$element.height())
+			this.$element.data('modalwidth',this.$element.width())
+      
 		},
 
 		tab: function () {
@@ -356,12 +366,18 @@
 	* ============== */
 
 	$(function () {
-		$(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
+		$(document).off('click.modal').on('click.modal.data-api', '[data-toggle|="modal"]', function ( e ) {
 			var $this = $(this),
+				toggle = $this.attr('data-toggle'),
 				href = $this.attr('href'),
 				$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
 				option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());
 
+			if (toggle!='modal'){
+				if ($target.data('modal')) option = $target.data('modal').isShown? 'layout':'show';
+				$target.toggleClass(toggle);
+			}
+
 			e.preventDefault();
 			$target
 				.modal(option)
diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js
index 1982975..7a891b7 100644
--- a/js/bootstrap-modalmanager.js
+++ b/js/bootstrap-modalmanager.js
@@ -49,6 +49,19 @@
 						}
 					}, 10);
 				});
+				// listen to 'change' event, checking if modal-size changed and call 'layout'. 
+				$(document).on('change.modal','.modal.modal-reposition',function(e){
+					var $target = $(e.currentTarget)
+						, modal = $target.data('modal');
+					if (modal && modal.isShown){
+						setTimeout(
+							function(){
+								if ($target.height()!=$target.data('modalheight') || $target.width()!=$target.data('modalwidth'))
+									modal.layout()
+              }
+							,$target.data('repositionwait') || that.options.repositionWait || 300);
+					}
+				});
 			}
 		},