Requirements

• jQuery 1.9+
• jquery.ipop.css
• jquery.ipop.js or jquery.ipop.min.js
• Modern browser. (Or at least IE8+, Firefox 4+, Chrome 18+)

HTML Syntax

You can use iPop without writing any javascript code. Various features of iPop are controlled using the HTML attributes.

<a href="URI"
    [ ipoptype="TYPE" ]
    [ ipopsize="SIZE" ]
    [ ipoptemplate="TEMPLATE" ]
    [ ipopcontents="HTML" ]
    [ ipopclass="CLASSNAME" ]
    class="iPop …">…</a>

Javascript Syntax

iPop() Method

Initialize/perform pop-up magic on selected elements

$(TARGET).iPop( [ ARG [, ARG [, …] ] ] );

Perform actions on currently displayed po-up - static calls.

$.fn.iPop( [ ARG [, ARG [, …] ] ] );

Where ARG can be one of

• CONTENTS Contents of pop-up. One of following types:
  • HTML string
  • jQuery object
  • HTML Element object
  • jQuery selector
  • function($element, iPopObject) callback that returns jQuery object, DOM element, HTML string or jQuery selector.
• COMMAND One of following keywords:
  • show show pop-up.
  • hide hide pop-up.
  • destroy destroy the pop-up element (remove it from DOM).
  • resize resize the pop-up.
• CLASSNAME list of white space separated CSS class names to add on pop-up's root element.
• SIZE width and height in format "WIDTH HEIGHT". Standard units including % and keyword auto supported. (Eg. "640px 480px" or "80% auto")
• URI must be in format
  • URL relative or absolute URL path. (Eg. ./tips.html)
  • URL#ID display only fragment of a document identified by ID attribute. (Eg. ./tips.html#tip1)
  • Google Maps URI in format gmaps:LOCATION. Display location on Google Maps. (Eg. gmaps: Eiffel Tower, Paris)
  • YouTube link to YouTube page containing any video. (Eg. http://www.youtube.com/watch?v=kX-WnlOCvXw)
  • Vimeo link (Eg. http://vimeo.com/12493449)
  • jQuery selector pointing to the content. (Eg. p.myWarning, p.about)
• OPTIONS javascript object containing a list of following optional options:
  • uri same as URI
  • command same as COMMAND
  • contents same as CONTENTS
  • type override automatic detection and force the pop-up type. One of keywords:
    • image
    • inline
    • iframe
    • gmaps
    • youtube
    • vimeo
  • className same as CLASSNAME
  • size same as SIZE
  • width same as specifying SIZE
  • height same as specifying SIZE
  • template specify the look & feel of the pop-up. TEMPLATE can be one of:
    • default for default look&feel. Show
    • default.blue default variant. Show
    • default.glass default variant. Show
    • default.violet default variant. Show
    • default.silver default variant. Show
    • default.dark default variant. Show
    • bare to remove all pop-up formatting including the close button. Show
    • bootstrap.info Bootstrap-like pop-up (requires Bootstrap). Show
    • bootstrap.success Bootstrap-like pop-up (requires Bootstrap). Show
    • bootstrap.warning Bootstrap-like pop-up (requires Bootstrap). Show
    • bootstrap.danger Bootstrap-like pop-up (requires Bootstrap). Show
    • SELECTOR jQuery selector referencing an existing HTML element containing a template definition.
    • HTML HTML string containing a template definition.
    • TEMPLATENAME custom template name. See named templates section.
    • default.TEMPLATENAME custom template id that extends the default template (default template is added on top of your custom template).
    For more see Templates.
  • onShow custom CALLBACK to be cooled when pop-up is shown.
  • onHide custom CALLBACK to be cooled when pop-up is hid.
  • onResize custom CALLBACK to be cooled when pop-up is resized.
  • onDestroy custom CALLBACK to be cooled when pop-up is removed from the DOM.
  • onCreate custom CALLBACK to be cooled when pop-up element is added to the DOM.

Examples

Click here

$('a.test').iPop("http://www.youtube.com/watch?v=kX-WnlOCvXw", "640px 480px");

Click here

$('a.test').iPop("/", {type: "iframe"}, "800px auto");

Click here

$('a.test').iPop("<h1 'white-space: nowrap;'>Hello world!</h1>", "cssClass1 cssClass2", {template: "bootstrap.warning"});

Click here

$('a.test').iPop("gmaps: White House, Washington", "800px 100%");

Click here

$('a.test').iPop("h1, h2, h3", "800px auto");

$.fn.iPop.defaults

The $.fn.iPop.default object contains default settings. It has the same syntax as OPTIONS described in Javascript Syntax section.

Example:

$.fn.iPop.default.onShow=myCallBackFce;

$.fn.iPop.templates

The $.fn.iPop.templates object contains the template definitions. See Templates section for more info.

$.fn.iPop.defaults={TEMPLATENAME: TEMPLATE [, …]}

Where TEMPLATE can be

• HTML string with the template.
• jQuery object with template elements.
• jQuery selector
• Other TEMPLATENAME (for creating aliases)

Callbacks

All CALLBACK functions accept following parameters

CALLBACK=function(hookName, $link, $popUp, iPopObject);

• $link the source jQuery element (usually the link user clicked on)
• $popUp the root jQuery element of the pop-up layer
• hookName the hook name (eg. onHide)
• iPopObject internal pop-up handler object

Templates

Standard Named Templates

Bootstrap warning template. Click here

<a href="#exampleInline" ipoptemplate="bootstrap.warning" class="iPop">Bootstrap</a>

Bare template with custom close button in the content. Click here

<a href="#exampleInline2" ipoptemplate="bare" class="iPop">Bare</a>

<div style="display: none;">
  <div id="exampleInline2" style="max-width: 480px; color: white;">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <hr/>
    <button type="button" class="iPopClose" style="margin: 1em auto;">Close</button>
  </div>
</div>

Custom Named Templates

You can create your named templates using $.fn.iPop.templates object.

<script>
  $.fn.iPop.templates.myTemplate="<div>…<div class='iPopData'></div>…<div class='iPopClose'>×</div>…</div>";
</script>

<a href="#exampleInline" ipoptemplate="myTemplate" class="iPop">Bare</a>

Or you can set custom template as the default

<script>$.fn.iPop.defaults.template="myTemplate";</script>

• Element with CSS class iPopClose or close will automatically close pop-up upon click.
• Element with CSS class iPopData will contain the contents of the pop-up.
• Root pop up element will have class name refering to your custom TEMPLATENAME or inlineTmpl in case your TEMPLATE is not named template.

If the custom template TEMPLATENAME has prefix default. then the default template is not removed and your template is nested inside default template.

<script>
  $.fn.iPop.templates["default.myTemplate"]="<div>…<div class='iPopData'></div>…<div class='iPopClose'>×</div>…</div>";
</script>

<a href="#exampleInline" ipoptemplate="default.myTemplate" class="iPop">Bare</a>

Embedded Templates

The template parameter can be also a jQuery selector. Click here

<a href="#exampleInline" ipoptemplate="#myTemplate" class="iPop">My template</a>

<div id="myTemplate" style="display: none; background: #FFFF99; padding: 2em;">
   <div class="myCloseButton iPopClose">Close</div>
   <div class="myFrame">
  <div class="iPopData"><!-- Here comes contents --></div>
   </div>
</div>

Default Template

You can specify the default template using $.fn.iPop.defaults object.

$.fn.iPop.defaults.template="bootstrap.info";