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