We have more to share with you. Follow us along to modal 2
Modal #1
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
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
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?
Types
Standard
A standard modal
$('.standard.test.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
$('.basic.test.modal')
.modal('show')
;
Archive Old Messages
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
Variations
Full Screen
A modal can use the entire size of the screen
$('.fullscreen.modal')
.modal('show')
;
Size
A modal can vary in size
$('.small.test.modal')
.modal('show')
;
$('.large.test.modal')
.modal('show')
;
States
Active
An active modal is visible on the page
Examples
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.
$('.basic.test.modal')
.modal({
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
$('.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')
;
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 |
| 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 |
| dimmerSettings |
{
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
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 | 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.''
}
|
|