Dynamic Flexible jQuery Popup Window Plugin - Popup.js

Popup.js is a simple, flexible, AJAX-enabled jQuery plugin used for display dynamic or static popup windows on the web page.

Features:

• Easy to use.
• Supports for centering.
• Custom templates.
• Custom popup background to use as a modal.
• Also can be used as an AJAX loading indicator.

How to use it:

1. Add the jQuery Popup.js plugin's JS and CSS files into your web project which has jQuery library loaded.

<link rel="stylesheet" href="jquery.popup.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.popup.js"></script>

2. Creating a new window with Popup is easy! Just call $.popup.create("popup_id"). If an element already exists with the id "popup_id", it will be used to create the window. Otherwise, Popup will create the element for you.

<div id="basic_popup" class="popup_window">
  This is a popup window!<br>
  <center><button class="popup_close">Close</button></center>
</div>

var basic_popup = $.popup.create("basic_popup", {"center": "open"});
$("#basic_popup_toggle").bind("click", function() {
  basic_popup.toggle();
});

3. When no element exists in the DOM with the id you send to the popup create method, it will be created for you and appended to the body by default. You can set the content by either setting the content option in the options hash when creating the popup, or by manually calling the popup's content method.

var content = "This is the default popup content." +
  "<br><center><button class='popup_close'>Close</button></center>";
var dynamic_popup = $.popup.create("dynamic_popup", {"content": content, "center": "open change"});
$("#dynamic_popup_toggle").bind("click", function() {
  dynamic_popup.toggle();
});
$("#dynamic_popup_content_set").bind("click", function() {
  var content = $("#dynamic_popup_content").val() +
    "<br><center><button class='popup_close'>Close</button></center>";
  dynamic_popup.content(content);
});

4. You can also load popup content by using AJAX. You can do this by either setting the "url" option when creating the popup, or by calling the popup's load method

<div id="banana" style="padding:8px;"></div>
<center><button class='popup_close'>Close</button></center>

var ajax_popup = $.popup.create("ajax_popup", {"url": "./ajax_popup_content.html", "center": "open load"});
$("#ajax_popup_toggle").bind("click", function() {
  ajax_popup.toggle();
});
$("#ajax_popup_load").bind("click", function() {
  var url = "./banana.html";
  ajax_popup.load(url);
});

<--! banana.html -->

<script type="text/javascript">
  $().ready(function() {
    var bananas = ["banana", "carot", "colorful", "computer", "dreadlocks", "guitar", "love", "mexican", "suit", "upside-down"];
    var banana = bananas[Math.floor(Math.random() * bananas.length)];
    $("#banana").html("<img src='./banana/" + banana + ".gif' style='min-width:100%;'>");
  });
</script>

5. Popup features full support for centering. In order to enable centering, you can set the "center" option when creating the popup, or later by calling the popup's center_options method. The value you set it to should be a space separated string that specifies the centering modes you wish to enable. Here is a list of all the valid centering modes:

• open - Centers the popup immediately after it is opened.
• load - Centers the popup whenever it or a child element (such as an image) is loaded.
• change - Centers the popup when it's content is changed.
• window - Centers the popup when the window's viewport is scrolled or resized.
• lock - Keeps the popup centered at all times. Also includes a cool scrolling feature for when the window's viewport is smaller than the size of the popup element! This will override all other centering options. This is usually the option you will want to use, unless you specifically want popups to retain their position after certain events trigger.
• true - Setting the "center" option to true (the boolean value true, not the string "true"), has the same effect as the lock option. This is the default setting for newly created popups.

<div id="centered_popup" class="popup_window">
  <center>
    <img src='illusion.png' width='200px' height='200px'>
    <br>The image is centered, but are the lines straight?
    <br><button class='popup_close'>Close</button>
  </center>
</div>

var centered_popup = $.popup.create("centered_popup");
$("#centered_popup_toggle").bind("click", function() {
  $("#centered_popup").css("top", $(window).scrollTop() / $.zoomCorrection());
  $("#centered_popup").css("left", $(window).scrollLeft() / $.zoomCorrection());
  centered_popup.toggle();
});
$("#centered_popup_content_change").bind("click", function() {
  var scale = Math.random();
  var size = 150 * scale + 50;
  var content = "<center><img src='illusion.png' width='" + size + "px' height='" + size + "px'>" +
    "<br>The image is centered, but are the lines straight?" +
    "<br><button class='popup_close'>Close</button></center>";
  centered_popup.content(content);
});
$("#centered_popup_options_set").bind("click", function() {
  var options = $("#centered_popup_options").val();
  centered_popup.center_options(options);
});
$("#centered_popup_code_toggle").bind("click", function() {
  $("#centered_popup_code").toggle();
});

6. Manually entering buttons to let users close popup windows gets a little old after a while doesn't it? That's why Popup has full support for templates! Templates can be used to define a snippet of HTML that will wrap the content of the popup whenever it is loaded or changed. You can set the template either by setting the template option of the popup when it is being created, or by calling the template method after it has been created. The value you set can be either a jQuery object, a valid jQuery selector string, or a string of HTML (but only if it starts with a valid HTML tag). The template can include any content you like, but in general it is probably most useful to provide menu buttons and/or navigation features. The template should contain at least one empty div with the class "popup_content", in which Popup will place the actual content when it is set.

<div id="basic_template" class="popup_template">
  <div class="popup_menu">
    <span class="popup_close"><a href="javascript:void(0);">X</a></span>
  </div>
  <div class="popup_content"></div>
</div>

var template_disabled_message = "Hahaha, you will never be able to close me!";
var template_enabled_message = "No! Not my archnemisis, the template!";
var template_popup = $.popup.create("template_popup", {"content": template_disabled_message, "center": true});
$("#template_popup_open").bind("click", function() {
  template_popup.open();
});
$("#template_popup_add_template").bind("click", function() {
  template_popup.template($("#basic_template"));
  template_popup.content(template_enabled_message);
});
$("#template_popup_remove_template").bind("click", function() {
  template_popup.template(null);
  template_popup.content(template_disabled_message);
});
$("#template_popup_code_toggle").bind("click", function() {
  $("#template_popup_code").toggle();
});

7. Popup supports backgrounds in order to let you create modal style popups. Backgrounds will fill the area of the parent element with an element that will block the user from interacting with the parent until the popup is closed. Backgrounds can be set just like templates, by setting the background option when creating the popup, or by calling the popup's background method. Valid values that can be used to set the background incude a jQuery selector, a valid jQuery selector string, an HTML string that starts with a valid HTML tag, or the value true, which will set the background to an empty element with the class "popup_background". The default background also includes the "popup_close" class, so it will trigger a close event when it is clicked, but user created backgrounds must make sure they manually include the class "popup_close" if they wish to emulate this behavior.

<div id="background_popup" class="popup_window">
  I am just here so this popup isn't empty. Please pay no attention to me.
</div>

<div id="background_popup_custom_background" class="popup_background popup_close" style="background-image:url('pony.png');opacity:0.75;">
</div>

var background_popup = $.popup.create("background_popup", {"center": true, "template": $("#basic_template")});
$("#background_popup_toggle").bind("click", function() {
  background_popup.toggle();
});
$("#background_popup_add_background").bind("click", function() {
  background_popup.background(true);
});
$("#background_popup_add_custom_background").bind("click", function() {
  background_popup.background($("#background_popup_custom_background"));
});
$("#background_popup_remove_background").bind("click", function() {
  background_popup.background(null);
});
$("#background_popup_code_toggle").bind("click", function() {
  $("#background_popup_code").toggle();
});

8. Popup allows you to define a loading message that will be displayed while waiting for AJAX content to be loaded. As with backgrounds and templates, the content can be set with the "loading" option when creating the popup, or by calling the popup's loading method. Valid values that can be used to set the loading message incude a jQuery selector, a valid jQuery selector string, an HTML string that starts with a valid HTML tag, or the value true, which will set the loading message to an empty element with the class "popup_loading". The default value for this setting is null, which will leave the current popup content displayed until the new content is ready.

<div id="background_popup" class="popup_window">
  I am just here so this popup isn't empty. Please pay no attention to me.
</div>

<div id="background_popup_custom_background" class="popup_background popup_close" style="background-image:url('pony.png');opacity:0.75;">
</div>

var background_popup = $.popup.create("background_popup", {"center": true, "template": $("#basic_template")});
$("#background_popup_toggle").bind("click", function() {
  background_popup.toggle();
});
$("#background_popup_add_background").bind("click", function() {
  background_popup.background(true);
});
$("#background_popup_add_custom_background").bind("click", function() {
  background_popup.background($("#background_popup_custom_background"));
});
$("#background_popup_remove_background").bind("click", function() {
  background_popup.background(null);
});
$("#background_popup_code_toggle").bind("click", function() {
  $("#background_popup_code").toggle();
});

---

This awesome jQuery plugin is developed by An0Hit0. For more Advanced Usages, please check the demo page or visit the official website.