jQuery PopBox

jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM.

See it in action here:


jQuery PopBox requires a specific HTML structure in order to work. There is also a small stylesheet that can be used. jQuery is a dependency.

  <script type='text/javascript' charset='utf-8' src='jquery.js'></script>
  <script type='text/javascript' charset='utf-8' src='popbox.js'></script>
  <link rel='stylesheet' href='popbox.css' type='text/css'>

The HTML structure looks like this.

<div class='popbox'>
  <a class='open' href='#'>Click Here!</a>

  <div class='collapse'>
    <div class='box'>
      <div class='arrow'></div>
      <div class='arrow-border'></div>

      Content in PopBox goes here :)

      <a href="#" class="close">close</a>

Invoke the plugin by calling it on a selector like normal.

<script type='text/javascript'>

If there are any CSS class name conflicts, they can be overridden.

<script type='text/javascript'>
       'open'          : '.open',
       'box'           : '.box',
       'arrow'         : '.arrow',
       'arrow_border'  : '.arrow_border',
       'close'         : '.close'


jQuery PopBox Screenshot


jQuery PopBox developed by Sean Behan at

It is inspired by the balloon UI element found in 37Signals Highrise CRM.


MIT license: