Elixon iPop is jQuery plugin that creates beautiful pop-up layer windows with any time of contents.


Table Of Contents

All links to examples in this documentation has following format: example

Get Started

This script requires jQuery. If you don't have jQuery on your page already add this line to your head element:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Include iPop after the jQuery script link:
<link href="/jquery.ipop.css" type="text/css" rel="stylesheet"/>
<script src="/jquery.ipop.js" type="text/javascript"></script>
Replace with correct path.


  1. Image

    Pure HTML example. Click here

    <a href="//www.google.com/landing/chrome/ugc/chrome-icon.jpg" class="iPop">example</a>

    Javascript based initialization example. Click here

    <a href="//www.google.com/landing/chrome/ugc/chrome-icon.jpg" id="e1">example</a>

    Static call. Click here


  2. Ajax Request

    Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol. Read more here.

    Whole page example. Click here

    <a href="./loremipsum.html" class="iPop">Whole page</a>

    Only page fragment by element id. Click here

    <a href="./loremipsum.html#loremH1" class="iPop">Only page fragment</a>

    Scripts and CSS on the requested page will not be executed/included when using the page fragment syntax URL …#fragment.

    Static call. Click here


  3. Inline HTML

    Display existing HTML snippet from the page in the pop-up window. Click here

    <a href="#exampleInline" class="iPop">Example</a>.

    <div style="display: none;">
    <div id="exampleInline" style="max-width: 480px;">
    <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>

    Static call with the same result. Click here


    HTML contents passed as a parameter. Click here

    $("#htmlParam").iPop("<h1>HTML Parameter</h1>");

    jQuery elements passed as a parameter. Click here


  4. IFrame

    Display external page in an iframe. Click here

    <a href="http://www.example.com" ipopsize="800px 100%" class="iPop">Display</a>

    Force any file (even local files) to open in an iframe. Click here

    <a href="./loremipsum.html" ipoptype="iframe" ipopsize="800px auto" class="iPop">Display</a>

    Due to browser security restrictions, the content size is detected only in iframes satisfying the same origin policy; the size cannot be automatically adjusted for pages from a different domain, subdomain, or protocol. Read more here.

    Shrinking iframes do not change the size automatically. Use $.fn.iPop('resize'); to enforce minimal size recalculation.

  5. Video

    Youtube video. Click here

    <a href="http://www.youtube.com/watch?v=eEwkrnw9g84" ipopsize="640px 360px" class="iPop">Youtube</a>

    Vimeo video. Click here

    <a href="http://vimeo.com/42757831" ipopsize="500px 281px" class="iPop">Vimeo</a>

  6. Maps

    Google Maps. Click here

    <a href="gmaps: Eiffel Tower, 5 Avenue Anatole France, Paris" ipopsize="800px 600px" class="iPop">Google Maps</a>

  7. Content Generator

    You can use custom function to generate the contents. Click here

    <a id="cGen" title="Lorem Ipsum Title" href="#">Click here</a>
    <script>$('#cGen').iPop(function($el) {return $('<div></div>').text($el.attr('title'));});</script>

Look & Feel

Standard Named Templates

You can set the template name using the template option or ipoptemplate attribute.

<a href="#exampleInline" ipoptemplate="TEMPLATE" class="iPop">Example</a>
$(element).iPop({template: TEMPLATE});
Standard template names:

Bootstrap Support

This feature requires Bootstrap.
  1. Bootstrap info template. Click here

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

  2. Bootstrap danger template. Click here

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

  3. Bootstrap success template. Click here

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

  4. 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>
<button type="button" class="iPopClose" style="margin: 1em auto;">Close</button>

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


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

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

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

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>

You can add custom class names on the pop-up to allow per pop-up CSS customization. Click here

<a href="#exampleInline" ipopclass="redBG" class="iPop">example</a>		
<style type="text/css">
.redBG {
background-color: rgba(255, 0, 0, 0.7);