Popularity
2.7
Growing
Activity
0.0
Stable
421
18
78

Description

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

See it in action here: http://gristmill.github.com/jquery-popbox/example.html

Programming language: JavaScript
Tags: Modals And Popups    

jquery-popbox alternatives and similar libraries

Based on the "Modals and Popups" category.
Alternatively, view jquery-popbox alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of jquery-popbox or a related project?

Add another 'Modals and Popups' Library
WorkOS - The modern identity platform for B2B SaaS
sponsored workos.com

Popular Comparisons

InfluxDB - Power Real-Time Data Analytics at Scale
sponsored www.influxdata.com

README

jQuery PopBox

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

See it in action here: http://gristmill.github.com/jquery-popbox/example.html

Usage

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.

<head>
  <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'>
</head>

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

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

<script type='text/javascript'>
   $(document).ready(function(){
     $('.popbox').popbox();
   });
</script>

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

<script type='text/javascript'>
   $(document).ready(function(){
     $('.popbox').popbox({
       'open'          : '.open',
       'box'           : '.box',
       'arrow'         : '.arrow',
       'arrow_border'  : '.arrow_border',
       'close'         : '.close'
      });
   });
</script>

Screenshot

jQuery PopBox Screenshot

Credits

jQuery PopBox developed by Sean Behan at Gristmill.io

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

License

MIT license:

http://www.opensource.org/licenses/MIT


*Note that all licence references and agreements mentioned in the jquery-popbox README section above are relevant to that project's source code only.