At GRAYBOX, we are frequently building websites that require a modal popup to display and focus visitors on some content. With so many existing tools, plugins, and libraries, it has become a difficult task to select one that suits a client's needs.
So how do we choose among the options out there? First, it is important to define exactly what the modal will be doing. Will it just show some simple HTML (text, image, or video)? Will it require user input? Is the content of the popup going to be loaded using AJAX?
Normally there would be a different type of modal for each of these purposes. Luckily, the answer to all of these questions can now be answered with a single lightweight jQuery plugin. The name: bPopup.js.
These are some of the features that bPopup provides:
- Events (open, close, callbacks)
- Following the user's scrolling on the page
- Auto-centering on the screen
- Custom close button
- Content loaded via:
- Previously defined content container
- Multiple popups at the same time
- And, of course, options to configure these actions
Because bPopup only gives you the tools to setup the modal, you have the freedom to create custom functionalities within the popup, allowing you to basically do anything you can imagine. Another bonus is that it's compatible on all major browsers including: Internet Explorer 7+, Firefox 2+, Chrome 4+, and others.
While bPopup isn't a one size fits all solution, it's certainly one of the most flexible options of its kind around.