From 5625c9dc1e509deb4f579c5e4daa0b1ee76fa962 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 00:41:14 +0700 Subject: [PATCH 1/6] flexible height and maxHeight option height and maxHeight option can pass a callback function or string 'auto', for recalculating height/maxHeight of modal-body everytime window's size changed. --- js/bootstrap-modal.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 0e39e9b..2456471 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,18 +120,21 @@ this.$element.css('margin-left', ''); } - this.$element.find('.modal-body') - .css('overflow', '') - .css(prop, ''); - - var modalOverflow = $(window).height() - 10 < this.$element.height(); - if (value){ + if (typeof value == 'function') value = $.proxy(value,this); + if (value == 'auto') value = $(window).height() - 165 ; + this.$element.find('.modal-body') .css('overflow', 'auto') .css(prop, value); + } else { + this.$element.find('.modal-body') + .css('overflow', '') + .css(prop, ''); } + var modalOverflow = $(window).height() - 10 < this.$element.height(); + if (modalOverflow || this.options.modalOverflow) { this.$element .css('margin-top', 0) From ab26577d7046eb7557b6c989201bc209520016c9 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 01:09:36 +0700 Subject: [PATCH 2/6] fix missing height/maxHeight callback call --- js/bootstrap-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 2456471..2019205 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -121,7 +121,7 @@ } if (value){ - if (typeof value == 'function') value = $.proxy(value,this); + if (typeof value == 'function') value = $.proxy(value,this)(); if (value == 'auto') value = $(window).height() - 165 ; this.$element.find('.modal-body') From 14751d1f60e6b714fa1e9dc8b77a095f6f68d254 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 01:56:36 +0700 Subject: [PATCH 3/6] fixed height/maxHeight callback could return null --- js/bootstrap-modal.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 2019205..7270b49 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,18 +120,12 @@ this.$element.css('margin-left', ''); } - if (value){ - if (typeof value == 'function') value = $.proxy(value,this)(); - if (value == 'auto') value = $(window).height() - 165 ; + if (typeof value == 'function') value = $.proxy(value,this)(); + if (value == 'auto') value = $(window).height() - 165 ; - this.$element.find('.modal-body') - .css('overflow', 'auto') - .css(prop, value); - } else { - this.$element.find('.modal-body') - .css('overflow', '') - .css(prop, ''); - } + this.$element.find('.modal-body') + .css('overflow', (value && 'auto') || '') + .css(prop, value || ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); From c9393d51d80a1ac099725d24e76befdb17df5999 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Mon, 11 Feb 2013 05:45:10 +0700 Subject: [PATCH 4/6] revert all change to original jschr's code --- js/bootstrap-modal.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 7270b49..0e39e9b 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,15 +120,18 @@ this.$element.css('margin-left', ''); } - if (typeof value == 'function') value = $.proxy(value,this)(); - if (value == 'auto') value = $(window).height() - 165 ; - this.$element.find('.modal-body') - .css('overflow', (value && 'auto') || '') - .css(prop, value || ''); + .css('overflow', '') + .css(prop, ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); + if (value){ + this.$element.find('.modal-body') + .css('overflow', 'auto') + .css(prop, value); + } + if (modalOverflow || this.options.modalOverflow) { this.$element .css('margin-top', 0) From 51b687b42ddbb1d3694cba7618454f8d645ee066 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Mon, 11 Feb 2013 11:22:58 +0700 Subject: [PATCH 5/6] Reposition the modal on size changed Modal with '.modal-reposition' class will listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. --- js/bootstrap-modal.js | 4 ++++ js/bootstrap-modalmanager.js | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 0e39e9b..a737073 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -141,6 +141,10 @@ .css('margin-top', 0 - this.$element.height() / 2) .removeClass('modal-overflow'); } + + this.$element.data('height',this.$element.height()) + this.$element.data('width',this.$element.width()) + }, tab: function () { diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js index 1373a47..d1bb07c 100644 --- a/js/bootstrap-modalmanager.js +++ b/js/bootstrap-modalmanager.js @@ -49,6 +49,14 @@ } }, 10); }); + // listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. + $(document).on('change.modal','.modal.modal-reposition',function(e){ + var $target = $(e.target) + , wait = $target.data('repositionwait') || that.options.repositionWait || 300 + if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')){ + setTimeout(function(){$(window).trigger('resize.modal')},wait); + } + }); } }, From 4a1ab542b0789bd317f62cf4a2c5d8623f1b9d56 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Wed, 13 Feb 2013 02:40:38 +0700 Subject: [PATCH 6/6] Reposition - use currentTarget, modal.layout The "change" event may be triggered by input, select and textarea element within modal. Otherwise required writing a custom script to trigger when ajax loading complete or trigger every specific interval . --- js/bootstrap-modalmanager.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js index d1bb07c..13b5624 100644 --- a/js/bootstrap-modalmanager.js +++ b/js/bootstrap-modalmanager.js @@ -49,12 +49,17 @@ } }, 10); }); - // listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. + // listen to 'change' event, checking if modal-size changed and call 'layout'. $(document).on('change.modal','.modal.modal-reposition',function(e){ - var $target = $(e.target) - , wait = $target.data('repositionwait') || that.options.repositionWait || 300 - if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')){ - setTimeout(function(){$(window).trigger('resize.modal')},wait); + var $target = $(e.currentTarget) + , modal = $target.data('modal'); + if (modal && modal.isShown){ + setTimeout( + function(){ + if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')) + modal.layout() + } + ,$target.data('repositionwait') || that.options.repositionWait || 300); } }); }