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.