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

Give it a good look with some CSS:

.some-style{
	display: inline-block;
	padding: 5px 10px;
	color: #42c3d6;
	cursor: pointer;
}

Prepare your popup content.

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

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) {
	e.preventDefault();
	$('#my-popup').bPopup();
});

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
Author:
Vlad Sargu
Revision:
1.0
Average rating:0 (0 Votes)