diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco
index ece802be4..d069e4009 100755
--- a/server/documents/modules/modal.html.eco
+++ b/server/documents/modules/modal.html.eco
@@ -365,31 +365,38 @@ type : 'UI Module'
detachable |
true |
- If set to false will prevent the modal from being moved to inside the dimmer |
+ Setting to to false will prevent the modal from being removed from the DOM and appended to the dimmer |
allowMultiple |
false |
- If set to true will not close other visible modals when opening a new one |
+ Setting to true will prevent closing other visible modals when opening a new one |
offset |
0 |
- A vertical offset to allow for content outside of modal, for example a close button, to be centered. |
+ A vertical offset to allow for content outside of the modal (close button, etc) |
context |
body
|
- Selector or jquery object specifying the area to dim |
+ A CSS selector or jQuery object specifying the area to dim |
closable |
true
|
- Settings to false will not allow you to close the modal by clicking on the dimmer |
+ Setting to false will not allow you to close the modal by clicking on the dimmer |
+
+
+ autofocus |
+
+ true
+ |
+ Setting to false will prevent autofocusing on the first input within the modal |
useCSS |
@@ -417,7 +424,7 @@ type : 'UI Module'
easeOutExpo
|
- Animation easing is only used if javascript animations are used. |
+ Animation easing is only used if javascript animations are used |
diff --git a/src/modules/modal.js b/src/modules/modal.js
index 2680f0f8a..df1aa99a0 100755
--- a/src/modules/modal.js
+++ b/src/modules/modal.js
@@ -252,50 +252,52 @@ $.fn.modal = function(parameters) {
},
showModal: function(callback) {
+ if(module.is.active()) {
+ module.debug('Modal is already visible');
+ return;
+ }
+
callback = $.isFunction(callback)
? callback
: function(){}
;
- if( !module.is.active() ) {
- if(module.cache === undefined) {
- module.cacheSizes();
- }
- module.set.position();
- module.set.screenHeight();
- module.set.type();
+ module.save.focus();
+ module.add.keyboardShortcuts();
+
+ if(module.cache === undefined) {
+ module.cacheSizes();
+ }
+ module.set.position();
+ module.set.screenHeight();
+ module.set.type();
- if(module.othersVisible() && !settings.allowMultiple) {
- module.debug('Other modals visible, queueing show animation');
- module.hideOthers(module.showModal);
+ if(module.othersVisible() && !settings.allowMultiple) {
+ module.debug('Other modals visible, queueing show animation');
+ module.hideOthers(module.showModal);
+ }
+ else {
+ $.proxy(settings.onShow, element)();
+
+ var transitionCallback = function() {
+ module.set.active();
+ $.proxy(settings.onVisible, element)();
+ callback();
+ };
+
+ if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ module.debug('Showing modal with css animations');
+ $module
+ .transition(settings.transition + ' in', settings.duration, transitionCallback)
+ ;
}
else {
- $.proxy(settings.onShow, element)();
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- module.debug('Showing modal with css animations');
- $module
- .transition(settings.transition + ' in', settings.duration, function() {
- $.proxy(settings.onVisible, element)();
- module.set.active();
- callback();
- })
- ;
- }
- else {
- module.debug('Showing modal with javascript');
- $module
- .fadeIn(settings.duration, settings.easing, function() {
- $.proxy(settings.onVisible, element)();
- module.set.active();
- callback();
- })
- ;
- }
+ module.debug('Showing modal with javascript');
+ $module
+ .fadeIn(settings.duration, settings.easing, transitionCallback)
+ ;
}
}
- else {
- module.debug('Modal is already visible');
- }
},
showDimmer: function() {
@@ -304,7 +306,7 @@ $.fn.modal = function(parameters) {
$dimmable.dimmer('show');
}
else {
- module.debug('Dimmer already visible');
+ module.debug('Dimmer is already visible');
}
},
@@ -322,7 +324,7 @@ $.fn.modal = function(parameters) {
hideDimmer: function() {
if( !module.is.active() ) {
- module.debug('Dimmer is not visible cannot hide');
+ module.debug('Dimmer is already hidden');
return;
}
module.debug('Hiding dimmer');
@@ -343,35 +345,37 @@ $.fn.modal = function(parameters) {
},
hideModal: function(callback) {
+ if(!module.is.active()) {
+ module.debug('Modal is already hidden');
+ return;
+ }
+
callback = $.isFunction(callback)
? callback
: function(){}
;
- if( !module.is.active() ) {
- module.debug('Cannot hide modal it is not active');
- return;
- }
- module.debug('Hiding modal');
+
+ module.restore.focus();
module.remove.keyboardShortcuts();
+
$.proxy(settings.onHide, element)();
+
+ var transitionCallback = function() {
+ module.remove.active();
+ $.proxy(settings.onHidden, element)();
+ callback();
+ };
+
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ module.debug('Hiding modal with css animations');
$module
- .transition(settings.transition + ' out', settings.duration, function() {
- $.proxy(settings.onHidden, element)();
- module.remove.active();
- module.restore.focus();
- callback();
- })
+ .transition(settings.transition + ' out', settings.duration, transitionCallback)
;
}
else {
+ module.debug('Hiding modal with javascript');
$module
- .fadeOut(settings.duration, settings.easing, function() {
- $.proxy(settings.onHidden, element)();
- module.remove.active();
- module.restore.focus();
- callback();
- })
+ .fadeOut(settings.duration, settings.easing, transitionCallback)
;
}
},
@@ -489,17 +493,22 @@ $.fn.modal = function(parameters) {
}
},
active: function() {
- module.add.keyboardShortcuts();
- module.save.focus();
- $module
- .addClass(className.active)
- ;
+ $module.addClass(className.active);
+
if(settings.closable) {
$dimmer
.off('click' + eventNamespace)
.on('click' + eventNamespace, module.event.click)
;
}
+
+ if(settings.autofocus) {
+ var $inputs = $module.find(':input:visible');
+ var $autofocus = $inputs.filter('[autofocus]');
+ var $input = $autofocus.length ? $autofocus : $inputs;
+
+ $input.first().focus();
+ }
},
scrolling: function() {
$dimmable.addClass(className.scrolling);
@@ -724,6 +733,7 @@ $.fn.modal.settings = {
allowMultiple : true,
detachable : true,
closable : true,
+ autofocus : true,
context : 'body',
duration : 500,
@@ -765,4 +775,4 @@ $.extend( $.easing, {
}
});
-})( jQuery, window , document );
\ No newline at end of file
+})( jQuery, window , document );