Popups

We are currently using an unreleased version of the plugin that does the popups. It is subject to frequent change and potential issues until this notice is removed.

Popups appear below the clicked element with an arrow pointing up towards the clicked element by default. If the link happens to be in a place on the page where it can't show the full popup, the script will automatically adjust the popup to fit in the window. This can make the arrow and corner look bad, we are looking into it.

We are using an unreleased version of the qtip plugin. Initial documentation is available, although it isn't completely finished yet.

Instructions

To make a link create a popup simply, give it a class of ixf-popup and make the href point to the hidden element (#stuff) on the page or URL (bananna.html) of the ajax you want it to load. You can optionally provide a title attribute that will be used as the title of the popup. The code for the above examples are:

<a href="#example1" title="Basic Example" class="ixf-popup">hidden element</a>
<a href="ajax-tooltip.html" title="Ajax Example" class="ixf-popup">ajax</a>

To have an element within the popup content close the popup (such as a cancel button) just add a class of closer to the element and it will automatically be set to close the popup.

If you have multiple links pointing to the same inline content, that content will be reused for each link. So if you have a form inside it and make a change, that change will show for any other links pointing to that same content. Usually you can open multiple popups and they will all stay open till you close them. In this case, any previous popups that were open with the same content will be closed and the content will be shown in the new popup only.

All other options are set using data- attributes with the following options, described in greater detail with examples below the table.

Name Type Default Options Description
pop-direction string Which direction it should pop by default (north/east/west) or which side of the screen you know it is against (left/right)
pop-size string size you want the popup to be when not part of the content that is loaded
pop-method string What triggers the popup to be displayed
pop-hover boolean false
pop-close string click Event that will cause it to close. Click means clicking the trigger again or the X in the popup. unfocus means clicking anywhere but inside the popup
pop-source string Load something other then what is in the href. Same rules apply as for href, #something is local content, no # means ajax
pop-options string You can pass any additional options you want to set custom options per instance. Must be formated with single quotes wrapping the value and double quotes used inside (ex: pop-options='{"content":"text"}')

Options Column = The script only recognizes these values

Positioning

If you know a tip will be on the left or right side of the screen you can add a pop-left or pop-right class respectively. Click on the site name in the top left and the Options in the top right for examples.

A more complex example loading a finder that also uses the pop-east modifier to have it pop out to the east.

Yes, as a matter of fact we do also provide a pop-west and a pop-north. But there isn't a pop-south, as that is essentially what the default is.

Hover

There is also a delayed hover version. If you leave your mouse on this link for a second it will bring up a popup. This is good for bringing up quick information on hover, but the link can still take you to a full page. For these popups only, click anywhere to close. Here's some information on how to implement it.

Focus

For use on form fields. Specifically text and textareas. Not sure how to handle radio buttons and checkboxes yet (what do you point at?). The IxF automatically applies the correct events (focus/blur) when it detects the popup is on an input field.

Popup Sizes

You must give your content a width. If you don't, it will go as wide as it can. The ajax or inline content should have a wrapper that defines the width, or you can use the preset sizes below.

We have several preset widths that you can use if you want. You can of course set your own widths specific to your content. But if you have no need for a set width, using these will keep a uniform look across your page and site. Apply these classes to the wrapper that you target via the href of the link.

(Moved the list to the middle to more easily see widths. You may want to start from the bottom to be able and see them all at once.)

You can optionally set the preset class on the anchor that triggers the popup. This is helpful when you are loading ajax content that you can't control the size of.

Current Issues

Filler content

Below here is just some content to allow you to scroll down and see the popups on screen easily. Please ignore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back Forward

Test 1

Test 2 with no title