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.
Types
Content
An element can specify popup content to appear
Title
An element can specify popup content with a title
HTML
An element can specify html for a popup
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
Variations
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 |
| 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 |
| set position(position) | Repositions a popup |
| remove | Removes popup from the page |
Examples
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 : 'top right',
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 |
|---|---|---|
| context | body | Selector or jquery object specifying where the popup should be created |
| position | top center | 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. |
| on | hover | Event used to trigger popup. Can be either focus, click, hover, or manual. Manul 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. Fade and slide down are available without including ui transitions |
| duration | 250 | Duration of animation events |
| closable | true | When using on: 'click' specifies whether clicking the page should close the popup |
| 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 |
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 |
| 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: {
content : 'Your popup has no content specified',
method : 'The method you called is not defined.',
recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'
}
|
|