diff --git a/index.html b/index.html index e1daae8..ff28f19 100644 --- a/index.html +++ b/index.html @@ -116,6 +116,16 @@ <h3>Long Modals</h3> </div> <br /> + <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">×</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..1df0e2d 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,7 +127,8 @@ this.$element.find('.modal-body') .css('overflow', '') - .css(prop, ''); + .css('max-height', '') + .css('height', ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); @@ -141,6 +147,9 @@ .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 +365,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); + } + }); } },