Jquery pass variable to modal ? using bPopup.js

Question

I've got a simple page that I want multiple hyper links on. Each link will go to the same page (test.php) but include a unique variable.

Test.php will capture the variable and load info from a database. This part is fine, the issue I have is how do I pass the variable to the modal page ?

I'm using bPopup.js and have this working as per this FIDDLE

The hyperlink i'm using is :

<a href="" id="my-button">LINKY</a>

I need to change the id from the example 'my-button' and I'm assuming I'll need to use a class as I can't have each hyperlink with the same ID.

What I'd like to do is this :

<a href="" class="modal" datavalue="111">LINKY 1</a>
<a href="" class="modal" datavalue="222">LINKY 2</a>
<a href="" class="modal" datavalue="333">LINKY 3</a>
<a href="" class="modal" datavalue="444">LINKY 4</a>

But how do I call this function and pass datavalue to it so it gets sent to test.php ?

similar to test.php?datavalue=111 etc

;(function($) {

    $(function() {
        $('#my-button').on('click', function(e) {
        e.preventDefault();

    $('#element_to_pop_up').bPopup({
        contentContainer:'.content',
        loadUrl: 'test.php' //Uses jQuery.load()
    });

});
});
})(jQuery);

Answer 1

Try this:

$('.modal').on('click', function(e) {
    e.preventDefault();
    var data = $(this).attr("datavalue"); //Get your attribute
    $('#element_to_pop_up').bPopup({
        contentContainer:'.content',
        loadUrl: 'test.php?datavalue='+data //Pass via get
    });
});