Create Facebook-like Windows with Popup.js ...

Over the past couple of months I’ve been working on a little library for a client that allows us to create Facebook-like popup windows with ease. It’s called popup.js. The library depends on Dan Webb’s excellent Low Pro and comes complete with it’s own behavior for easy unobtrusive use.

So how does it work? Well, once you have the proper plumbing in place you can declare a simple popup window like this:


<div class="popup" id="test" style="display: none">
  <h3 class="title">Popup Window</h3>
  <div class="popup_content">
    <p>Hello world!</p>
    <p><a href="javascript: Element.closePopup( est)">Close</a>
  </div>
</div>

This markup assumes that you are using the included facebook.css stylesheet, but the only thing that is necessary to have a functioning popup window is a div with an ID attribute. You should also set style=”display: none” to ensure that the div is not visible when the page loads.

Popping up the window is as simple as linking to it:


<a href="#test" class="popup">Popup</a>

Links with the class of “popup” get the Popup.TriggerBehavior which will trigger the popup when clicked. Note that the href should be set to the ID of the element to popup. If you prefer you can set the href to a URL that returns the HTML for the popup and an AJAX call will be made to that URL.

source: wiseheartdesign

 View Full Story.