Learn how to connect an HTML form to the database and email! It takes only 3 minutes. Read more

javascript by
Free Download

jQuery iPop

Buy Now! 4 $
  • Home
  • Demo
  • Gallery
  • Get Started
  • API
  • Contents
  • Questions
  • 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>
    Replace with correct path.


    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>

      Static call.

    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.

    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>

      Static call with the same result.


      HTML contents passed as a parameter.

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

      jQuery elements passed as a parameter.

    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.

    ').text($el.attr('title'));}); /*]]>*/
    <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:
    • default (default) for default look&feel.
    • default.blue default variant.
    • default.glass default variant.
    • default.violet default variant.
    • default.silver default variant.
    • default.dark default variant.

    Bootstrap Support

    This feature requires Bootstrap.
    1. Bootstrap info template.

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

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

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

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


    Bare template with custom close button in the content.

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

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

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