https://github.com/gristmill/jquery-popbox

jQuery PopBox UI Element
https://github.com/gristmill/jquery-popbox

Last synced: 6 months ago
JSON representation

jQuery PopBox UI Element

• Host: GitHub
• URL: https://github.com/gristmill/jquery-popbox
• Owner: gristmill
• Created: 2012-04-24T21:01:23.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2018-10-01T18:26:07.000Z (about 7 years ago)
• Last Synced: 2024-08-03T13:04:51.389Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://gristmill.github.com/jquery-popbox/
• Size: 277 KB
• Stars: 420
• Watchers: 18
• Forks: 78
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-javascript - jquery-popbox - jQuery PopBox UI Element ` 📝 9 years ago ` (Modals and Popups [🔝](#readme))
• awesome-javascript - jquery-popbox - jQuery PopBox UI Element - ★ 447 (Modals and Popups)
• awesome-javascript-cn - 官网
• A-collection-of-awesome-browser-side-JavaScript-libraries-resources-and-shiny-things. - jquery-popbox - jQuery PopBox UI Element. (Modals and Popups / Other)
• awesome-javascript-cn - jquery-popbox
• awesome-javascript - jquery-popbox - jQuery PopBox UI Element. (Modals and Popups / Other)
• fucking-awesome-javascript - jquery-popbox - jQuery PopBox UI Element. (Modals and Popups / Other)
• awesome-focusnetworks - jquery-popbox - jQuery PopBox UI Element. (Modals and Popups / Other)

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.

```html

  

  

  

```

The HTML structure looks like this.

```html



  Click Here!


  


    


      


      


      Content in PopBox goes here :)

      close

    

  



```


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

```html

   $(document).ready(function(){

     $('.popbox').popbox();

   });

```

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

```html

   $(document).ready(function(){

     $('.popbox').popbox({

       'open'          : '.open',

       'box'           : '.box',

       'arrow'         : '.arrow',

       'arrow_border'  : '.arrow_border',

       'close'         : '.close'

      });

   });

```

## Screenshot

![jQuery PopBox Screenshot](https://github.com/gristmill/jquery-popbox/raw/master/screenshot.png)

## Credits

jQuery PopBox developed by [Sean Behan](http://twitter.com/_sbehan) at [Gristmill.io](http://gristmill.io)

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

## License

MIT license:

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