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.
The best thing about this popup is that, as its author sums up, it doesn't create or style the popup for you, but provides you with all the logic like centering, modal overlay, events, and more. When it comes to adaptability, bPopup is the best option because it gives you all the freedom to create the style that matches with the website structure. Also, since the plugin handles all the JavaScript logic, bPopup is simple to incorporate into any website. With just a few lines of code, we are ready to display any kind of content.
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
- Ajax
- Iframe
- 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.