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.
Types
Javascript
Popup
An element can specify popup content to appear
Titled
An element can specify popup content with a title
HTML
An element can specify HTML for a popup
My Neighbor Totoro
Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
Pre-Existing
An element can display a popup that is already included in the page
Watchmen
In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
User Rating
No Javascript
Tooltip
New in 2.2
An element can specify a simple tooltip that can appear without javascript
Variations
Basic
A popup can provide more basic formatting
Width
A popup can be extra wide to allow for longer content
Fluid
A fluid popup will take up the entire width of its offset container
1
2
3
4
Size
A popup can vary in size
Flowing
A popup can have no maximum width and continue to flow to fit its content
Basic Plan
2 projects, $10 a month
Business Plan
5 projects, $20 a month
Premium Plan
8 projects, $25 a month
Inverted
A popup can have its colors inverted
Usage
Initializing A Popup
A popup is initialized on an activating element
$('.activating.element')
.popup()
;
Using a Pre-existing Popup
Using a pre-existing popup allows for you to include complex HTML inside your popup.
If you include your popup on page load as an adjacent sibling element to your activating element it can be found automatically.
To instruct popup to look inline for your popup element you can initialize it with the inline parameter
$('.button')
.popup({
inline: true
})
;
Custom Header
Using a Pre-existing Popup Anywhere
If you cannot include your popup element as a sibling element, you can specify a custom selector to retrieve your popup
$('.button')
.popup({
popup: '.special.popup'
})
;
Specifying Content In Metadata
Frequently used settings like, title, content, HTML, or offset or variation, can be included in HTML metadata
Specifying Content In Javascript
$('.ui.popup')
.popup({
title : 'Popup Title',
content : 'Hello I am a popup'
})
;
Behavior
All the following behaviors can be called using the syntax:
$('.your.element')
.popup('behavior name', argumentOne, argumentTwo)
;
| Behavior | Description |
|---|---|
| show | Shows popup |
| hide | Hides popup |
| hide all | Hides all visible pop ups on the page |
| get popup | Returns current popup dom element |
| change content(html) | Changes current popup content |
| toggle | Toggles visibility of popup |
| is visible | Returns whether popup is visible |
| is hidden | Returns whether popup is hidden |
| exists | Returns whether popup is created and inserted into the page |
| reposition | Adjusts popup when content size changes (only necessary for centered popups) |
| set position(position) | Repositions a popup |
| destroy | Removes popup from the page and removes all events |
| remove popup | Removes popup from the page |
Examples
Specifying Popup Boundaries
New in 2.2
Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. This can be useful in complex paned layouts
Additionally popups can now specify a scroll context, to allow for scroll containers other than window to cause a clicked popup to hide on scroll.
$('.boundary.example .button')
.popup({
boundary: '.boundary.example .segment'
})
;
Normally this popup would open in the default position top center but because this would escape the boundaries of the segment it will search other available positions until it can find one to place the popup while staying inside the segment
Wide Popup Menu
An easier way to display complex content, like a wide popup menu is to have the popup content as a pre- existing part of your page's HTML.
Using the setting inline: true will let Semantic know to display the next sibling ui popup element after the activator.
Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu
$('.example .menu .browse')
.popup({
inline : true,
hoverable : true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
})
;
Specifying a selector for a popup
If its not possible to include the popup content as the next sibling, you can also specify a custom selector to help link the popup contents to its activator.
$('.example .custom.button')
.popup({
popup : $('.custom.popup'),
on : 'click'
})
;
I'm not on the same level as the button, but i can still be found.
Specifying a trigger event
A popup trigger event can be specified
$('.example .teal.button')
.popup({
on: 'click'
})
;
$('.example input')
.popup({
on: 'focus'
})
;
Target Element
A popup can specify a different target element than itself to show a popup
$('.test.button')
.popup({
position : 'right center',
target : '.test.image',
title : 'My favorite dog',
content : 'My favorite dog would like other dogs as much as themselves'
})
;
Inline or relative to page
A popup can either be inserted directly after an element, or added as a child element to the page's body.
/* this will only style the popup if inline is true */
.example .popup {
color: #FF0000;
}
$('.inline.icon')
.popup({
inline: true
})
;
Positioning
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
Specifying an offset
A popup position can be adjusted manually by specifying an offset property using data-offset="value"
Transitions
A popup can use any named ui transition.
HomeChoose a transition
$('.selection')
.dropdown({
onChange: function(value) {
$('.demo.icon')
.popup({
transition: value
})
.popup('toggle')
;
}
})
;
Popup Settings
Settings to configure popup behavior
| Setting | Default | Description |
|---|---|---|
| popup | false | Can specify a DOM element that should be used as the popup. This is useful for including a pre-formatted popup. |
| exclusive | false | Whether all other popups should be hidden when this popup is opened |
| movePopup | true | Whether to move popup to same offset container as target element when popup already exists on the page. Using a popup inside of an element without overflow:visible, like a sidebar, may require you to set this to false |
| observeChanges | true | Whether popup should attach mutationObservers to automatically run destroy when the element is removed from the page's DOM. |
| boundary | window | When the popup surpasses the boundary of this element, it will attempt to find another display position. |
| context | body | Selector or jquery object specifying where the popup should be created. |
| scrollContext | window | Will automatically hide a popup on scroll event in this context |
| jitter | 2 | Number of pixels that a popup is allowed to appear outside the boundaries of its context. This allows for permissible rounding errors when an element is against the edge of its context. |
| position | top left | Position that the popup should appear |
| inline | false | If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden. |
| preserve | false | Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads. |
| prefer | adjacent | Can be set to adjacent or opposite to prefer adjacent or opposite position if popup cannot fit on screen |
| lastResort | false | When set to false, a popup will not appear and produce an error message if it cannot entirely fit on page. Setting this to a position like, right center forces the popup to use this position as a last resort even if it is partially offstage. Setting this to true will use the last attempted position. |
| on | hover | Event used to trigger popup. Can be either focus, click, hover, or manual. Manual popups must be triggered with $('.element').popup('show'); |
| delay |
delay: {
show: 50,
hide: 0
}
|
Delay in milliseconds before showing or hiding a popup on hover or focus |
| transition | slide down | Named transition to use when animating menu in and out. |
| duration | 200 | Duration of animation events |
| arrowPixelsFromEdge New in 2.3 |
20 | When a target element is less than 2x this amount, the popup will appear with the arrow centered on the target element, instead of with the popup edge matching the target's edge. |
| setFluidWidth | true | Whether popup should set fluid popup variation width on load to avoid width: 100% including padding |
| hoverable | false | Whether popup should not close on hover (useful for popup navigation menus) |
| closable | true | When using on: 'click' specifies whether clicking the page should close the popup |
| addTouchEvents | true | When using on: 'hover' whether touchstart events should be added to allow the popup to be triggered |
| hideOnScroll | auto | Whether popup should hide on scroll or touchmove, auto only hides for popups without on: 'click'.Set this to false to prevent mobile browsers from closing popups when you tap inside input fields. |
| target | false | If a selector or jQuery object is specified this allows the popup to be positioned relative to that element. |
| distanceAway | 0 | Offset for distance of popup from element |
| offset | 0 | Offset in pixels from calculated position |
| maxSearchDepth | 10 | Number of iterations before giving up search for popup position when a popup cannot fit on screen |
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Parameters | Context | Description | |
|---|---|---|---|
| onCreate | $module | $popup | Callback on popup element creation, with created popup |
| onRemove | $module | $popup | Callback immediately before Popup is removed from DOM |
| onShow | $module | $popup | Callback before popup is shown. Returning false from this callback will cancel the popup from showing. |
| onVisible | $module | $popup | Callback after popup is shown |
| onHide | $module | $popup | Callback before popup is hidden. Returning false from this callback will cancel the popup from hiding. |
| onHidden | $module | $popup | Callback after popup is hidden |
| onUnplaceable | $module | $popup | Callback after popup cannot be placed on screen |
Content Settings
Settings to specify popup contents
| Setting | Description |
|---|---|
| variation | Popup variation to use, can use multiple variations with a space delimiter |
| content | Content to display |
| title | Title to display alongside content |
| html | HTML content to display instead of preformatted title and content |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | popup | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
popup : '.ui.popup'
}
|
DOM Selectors used internally |
| metadata |
metadata: {
content : 'content',
html : 'html',
offset : 'offset',
position : 'position',
title : 'title',
variation : 'variation'
}
|
HTML Data attributes used to store data |
| className |
className : {
loading : 'loading',
popup : 'ui popup',
position : 'top left center bottom right',
visible : 'visible'
}
|
Class names used to attach style to state |
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Popup | Name used in debug logs |
| silent | false | Silences all console output including error messages, regardless of other debug settings. |
| debug | false | Provides standard debug output to console |
| performance | true | Provides standard debug output to console |
| verbose | true | Provides ancillary debug output to console |
| errors |
error: {
invalidPosition : 'The position you specified is not a valid position',
cannotPlace : 'Popup does not fit within the boundaries of the viewport',
method : 'The method you called is not defined.',
noTransition : 'This module requires ui transitions
|
|