<script type="text/javascript">
  $().ready(function() {
    var basic_popup = $.popup.create("basic_popup", {"center": "open"});
    $("#basic_popup_toggle").bind("click", function() {
      basic_popup.toggle();
    });
  });
</script>

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

<script type="text/javascript">
  $().ready(function() {
    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);
    });
  });
</script>

<script type="text/javascript">
  $().ready(function() {
    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);
    });
  });
</script>

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

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

<script type="text/javascript">
  $().ready(function() {
    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();
    });
  });
</script>

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

<script type="text/javascript">
  $().ready(function() {
    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();
    });
  });
</script>

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

<script type="text/javascript">
  $().ready(function() {
    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();
    });
  });
</script>

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

<script type="text/javascript">
  $().ready(function() {
    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();
    });
  });
</script>

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