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
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 |
| 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
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 | true | 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 is specified in settings. Using a popup inside of an element without overflow:visible, like a sidebar, may require you to set this to false |
| context | body | Selector or jquery object specifying where the popup should be created |
| 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. |
| 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 | 200 | Duration of animation events |
| hideOnScroll | auto | Whether popup should hide on scroll and touchmove, auto only hides for popups withohut on:click |
| 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 |
| 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 |
| onVisible | $module | $popup | Callback after popup is shown |
| onHide | $module | $popup | Callback before popup is hidden |
| onHidden | $module | $popup | Callback after popup is hidden |
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.'
}
|
|