How to add a custom popup to the theme?

First of all create a new element witch will open your popup on click. That could be whatever you want: <a>, <span>, <li> etc. we recommend to use a <span>.

Add two classes to your span. One witch will style your button and other witch will be selected through JavaScript. We strongly recommend to prefix the second one with "js-", this will keep your code nice and cleen. Like in the example bellow:

<span class="somestyle js-popup-button">
	Open popup

Give it a good look with some CSS:

	display: inline-block;
	padding: 5px 10px;
	color: #42c3d6;
	cursor: pointer;

Prepare your popup content.

<div id="my-popup">
		Hello, I'm a new popup!

Firstly hide your popup using CSS:

#my-popup {
	display: none;

And now we are ready to link them together (the button and the popup) using bPopup plugin.

$('.js-popup-button').click(function(e) {

You can get more information on how to configure the bPopup on there official documentaion.

Tags: bPopup, popup

Last update:
2014-11-20 14:21
Vlad Sargu
Average rating:0 (0 Votes)