We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
Header
Content
Modal #1
We have more to share with you. Follow us along to modal 2
Modal #2
That's everything!
Archive Old Messages
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
Delete Your Account
Are you sure you want to delete your account
Delete Your Account
Delete Your Account
Are you sure you want to delete your account
Delete Your Account
Are you sure you want to delete your account
Update Your Settings
Give us your feedback
Changing Your Thing
Do you want to change that thing to something else?
Profile Picture
Modal Header
This is an example of expanded content that will cause the modal's dimmer to scroll
Profile Picture
Modal Header
This is an example of expanded content that will cause the modal's dimmer to scroll
Select a Photo
Default Profile Image
We've found the following gravatar image associated with your e-mail address.
Is it okay to use this photo?
Select a Photo
Default Profile Image
We've found the following gravatar image associated with your e-mail address.
Is it okay to use this photo?
Types
Modal
A standard modal
$('.ui.modal')
.modal('show')
;
Profile Picture
We've auto-chosen a profile image for you.
We've grabbed the following image from the gravatar image associated with your registered e-mail address.
Is it okay to use this photo?
Basic
A modal can reduce its complexity
$('.ui.basic.modal')
.modal('show')
;
Archive Old Messages
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
Content
Header
A modal can have a header
Header
Content
A modal can contain content
Header
Image Content New in 2.0
A modal can contain image content
Header
Actions
A modal can contain a row of actions
Header
Variations
Full Screen
A modal can use the entire size of the screen
$('.fullscreen.modal')
.modal('show')
;
Size
A modal can vary in size
$('.mini.modal')
.modal('show')
;
$('.tiny.modal')
.modal('show')
;
$('.small.modal')
.modal('show')
;
$('.large.modal')
.modal('show')
;
Scrolling Content
New in 2.2.11
A modal can use the entire size of the screen
Header
Very long content goes here
$('.ui.longer.modal')
.modal('show')
;
States
Active
An active modal is visible on the page
Examples
Disabling Vertical Centering
New in 2.3
When your modal has dynamic content, or multiple steps, it can make sense to disable centering so content doesn't jump around vertically when its height changes.
$('.special.modal')
.modal({
centered: false
})
.modal('show')
;
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.modal')
.modal('show')
;
Internally Scrolling Content
You may prefer to have the content of your modal scroll itself, you can do this by using the scrolling content variation.
$('.longer.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 first modal buttons
$('.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.
$('.ui.basic.test.modal')
.modal({
closable : false,
onDeny : function(){
window.alert('Wait not yet!');
return false;
},
onApprove : function() {
window.alert('Approved!');
}
})
.modal('show')
;
Attach events
A modal can attach events to another element
$('.test.modal')
.modal('attach events', '.test.button', 'show')
;
Transitions
A modal can use any named ui transition.
Choose transition
$('.selection.dropdown')
.dropdown({
onChange: function(value) {
$('.test.modal')
.modal('setting', 'transition', value)
.modal('show')
;
}
})
;
Dimmer Variations
Modals can specify additional variations like blurring or inverted which adjust how the dimmer displays.
$('.ui.modal')
.modal({
inverted: true
})
.modal('show')
;
$('.ui.modal')
.modal({
blurring: true
})
.modal('show')
;
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.
$('.ui.modal')
.modal()
;
Modal Title
An image can appear on left or an icon
A description can appear on the right
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 | If set to false will prevent the modal from being moved to inside the dimmer |
| useFlex | 'auto' | Auto will automatically use flex in browsers that support absolutely positioned elements inside flex containers. Setting to true/false will force this setting for all browsers. |
| autofocus | true | When true, the first form input inside the modal will receive focus when shown. Set this to false to prevent this behavior. |
| observeChanges | false | Whether any change in modal DOM should automatically refresh cached positions |
| allowMultiple | false | If set to true will not close other visible modals when opening a new one |
| keyboardShortcuts | true | Whether to automatically bind keyboard shortcuts |
| 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 |
| dimmerSettings |
{
closable : false,
useCSS : true
}
|
You can specify custom settings to extend UI dimmer |
| transition | scale | Named transition to use when animating menu in and out, full list can be found in ui transitions docs. |
| duration | 400 | Duration of animation |
| queue | false | Whether additional animations should queue |
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($element) | Modal | Is called after a modal starts to hide. If the function returns false, the modal will not hide. |
| onHidden | Modal | Is called after a modal has finished hiding animation. |
| onApprove($element) | Click | Is called after a positive, approve or ok button is pressed. If the function returns false, the modal will not hide. |
| onDeny($element) | Modal | Is called after a negative, deny or cancel button is pressed. If the function returns false the modal will not hide. |
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 | False | 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.'
}
|
|