Content
UI Module: Modal
5 of 10
1. Accordion
2. Checkbox
3. Dimmer
4. Dropdown
5. Modal
6. Popup
7. Rating
8. Shape
9. Sidebar
10. Transition
Menu

Modal

A modal displays content that temporarily blocks interactions with a web site

Learn about Modules
Definition Examples Usage Settings
Definition Examples Usage Settings
Change Your Homepage

Are you sure you want to change your homepage to Poodle.com?

No
Yes
Changing Your Thing

Do you want to change that thing to something else?

No
Yes
Changing Your Thing

Do you want to change that thing to something else?

No
Yes
Profile Picture
Are you sure you want to upload that?

I mean it's not really the best profile photo.

It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.

Cancel
Add Photo
Types Variations States

Types

Standard

A standard modal

$('.test.modal') .modal('show') ;
Header
Some content to the left, usually an image or icon
Some content to the right
Cancel
Okay

Basic

A modal can reduce its complexity

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

Variations

Size

A modal can vary in size

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

States

Active

An active modal is visible on the page

...

Examples

Forcing a Choice

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

$('.basic.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 a callback returns false it will prevent the modal from closing

$('.basic.modal') .modal('setting', { closable : false, onDeny : function(){ window.alert('Wait not yet!'); return false; }, onApprove : function() { window.alert('Approved!'); } }) .modal('show') ;

Transitions

A modal can use any named ui transition.

Choose transition
Horizontal Flip
Vertical Flip
Fade Up
Fade
Scale
$('.selection') .dropdown({ onChange: function(value) { $('.test.modal') .modal('setting', 'transition', value) .modal('show') ; } }) ;

Attach events

A modal can attach events to another element

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

Usage

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() ;
Modal Title
Content can appear on left
Content can appear on right
Cancel
OK

Behavior

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

Settings

Modal Settings
Modal settings modify the modal's behavior

Setting Default Description
detachable true Setting to to false will prevent the modal from being removed from the DOM and appended to the dimmer
allowMultiple false 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 the modal (close button, etc)
context body A CSS 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
autofocus true Setting to false will prevent autofocusing on the first input within the modal
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
easing easeOutQuad Animation easing is only used if javascript animations are used

Callbacks
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
selector : { close : '.close, .actions .button', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' },
className
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 True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error
error : { method : 'The method you called is not defined.'' }