A modal displays content that temporarily blocks interactions with the main view of a site




A standard modal

$('.standard.test.modal') .modal('show') ;


A modal can reduce its complexity

$('.basic.test.modal') .modal('show') ;


Full Screen

A modal can use the entire size of the screen

$('.fullscreen.modal') .modal('show') ;


A modal can vary in size

$('.small.test.modal') .modal('show') ;
$('.large.test.modal') .modal('show') ;



An active modal is visible on the page


Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

$('.long.test.modal') .modal('show') ;

Multiple Modals

A modal can open a second modal. If you use allowMultiple: true parameter the second modal will be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.

// initialize all modals $('.coupled.modal') .modal({ allowMultiple: true }) ; // open second modal on button click $('.second.modal') .modal('attach events', '.first.modal .button') ; // show first immediately $('.first.modal') .modal('show') ;
$('.coupled.modal') .modal({ allowMultiple: false }) ; // attach events to buttons $('.second.modal') .modal('attach events', '.first.modal .button') ; // show first now $('.first.modal') .modal('show') ;

Forcing a Choice

You can disable a modal's dimmer from being closed by click to force a user to make a choice

$('.basic.test.modal') .modal('setting', 'closable', false) .modal('show') ;

Approve / Deny Callbacks

Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.

If onDeny or onApprove returns false it will prevent the modal from closing
$('.basic.test.modal') .modal({ closable : false, onDeny : function(){ window.alert('Wait not yet!'); return false; }, onApprove : function() { window.alert('Approved!'); } }) .modal('show') ;


A modal can use any named ui transition.

$('.selection.dropdown') .dropdown({ onChange: function(value) { $('.standard.test.modal') .modal('setting', 'transition', value) .modal('show') ; } }) ;

Attach events

A modal can attach events to another element

$('.standard.test.modal') .modal('attach events', '.test.button', 'show') ;
Launch modal


Initializing a modal

A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.

Why move modal content?

Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.

If you need to have your modal stay in its current location you can preserve its position using the setting detachable: false

$('.ui.modal') .modal() ;


All the following behaviors can be called using the syntax:

$('.ui.modal') .modal('behavior name', argumentOne, argumentTwo) ;
Behavior Description
show Shows the modal
hide Hides the modal
toggle Toggles the modal
refresh Refreshes centering of modal on page
show dimmer Shows associated page dimmer
hide dimmer Hides associated page dimmer
hide others Hides all modals not selected modal in a dimmer
hide all Hides all visible modals in the same dimmer
cache sizes Caches current modal size
can fit Returns whether the modal can fit on the page
is active Returns whether the modal is active
set active Sets modal to active


Modal Settings
Modal settings modify the modal's behavior

Setting Default Description
detachable true If set to false will prevent the modal from being moved to inside the dimmer
autofocus true When true, the first form input inside the modal will receive focus when shown. Set this to false to prevent this behavior.
allowMultiple false If set to true will not close 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.
context body Selector or jquery object specifying the area to dim
closable true Setting to false will not allow you to close the modal by clicking on the dimmer
{ closable : false, useCSS : true }
You can specify custom settings to extend UI dimmer
useCSS true Whether to use CSS animations instead of fallback javascript animations
transition scale Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration 400 Duration of animation
queue false Whether additional animations should queue
easing easeOutExpo Animation easing is only used if javascript animations are used.

Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onShow Modal Is called when a modal starts to show.
onVisible Modal Is called after a modal has finished showing animating.
onHide Modal Is called after a modal starts to hide.
onHidden Modal Is called after a modal has finished hiding animation.
onApprove Modal Is called after a positive, approve or ok button is pressed
onDeny Modal Is called after a negative, deny or cancel button is pressed.

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace modal Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { close : '.close, .actions .button', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' },
className : { active : 'active', scrolling : 'scrolling' }

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Modal Name used in debug logs
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error : { method : 'The method you called is not defined.'' }

Dimmer Message
Dimmer sub-header