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.

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

   Javascript based initialization example.

   <a href="//www.google.com/landing/chrome/ugc/chrome-icon.jpg" id="e1">example</a>
   <script>$("#e1").iPop();</script>

   Static call.

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

   Whole page example.

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

   Only page fragment by element id.

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

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

3. Inline HTML

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

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

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

   HTML contents passed as a parameter.

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

   jQuery elements passed as a parameter.

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

4. IFrame

   Display external page in an iframe.

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

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

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

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

5. Video

   Youtube video.

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

   Vimeo video.

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

6. Maps

   Google Maps.

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

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

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

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

This feature requires Bootstrap.

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

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

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

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

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