Overview

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

Highlights

• Easy to use - user is not required to write any javascript code.
• Inbuilt support for Bootstrap.
• Automatically resizes according to viewport.
• Mobile device friendly - support for device orientation change.
• Inbuilt support for important content types: Google Maps, Vimeo, Youtube, iframes, images.
• Automatically resizes to accommodate an iframe with document from the same domain to avoid scrollbars.
• Intelligent automatic resizing to fit inline contents.
• Fully customizable pop-up templates.
• Multiple pop-up styles possible on one page.

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>

Examples

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>
   <script>$("#e1").iPop();</script>

   Static call. Click here

   $.fn.iPop("http://www.google.com/landing/chrome/ugc/chrome-icon.jpg");

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

   $.fn.iPop("./loremipsum.html");

3. Inline HTML

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

   Lorem Ipsum

   Less lorem ipsum...

   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.

   More lorem ipsum...

   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.

   <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>
     </div>
   </div>

   Static call with the same result. Click here

   $.fn.iPop('#exampleInline');

   HTML contents passed as a parameter. Click here

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

   jQuery elements passed as a parameter. Click here

   $("#htmlParam2").iPop($("#exampleInline"));

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>

or

$(element).iPop({template: TEMPLATE});

Standard template names:

• default (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

Bootstrap Support

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>

Customization

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>

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

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

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
<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.

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>

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);
  }
</style>