Jquery passing data attributes to modal on click link

I am trying to pass some custom data attributes to a modal which is opened through a link .



The HTML snippet is as following:


Action




*

Contact









The modal snippet is as following :























I seem to be unable to set "modal-title" with the value of attribute "data-userName".



The jquery I thought would do so (only inserted alert to see if value is passed or not) :

$('#modal_contact').on('click', function() {
var $el = $(this);
var $username = $el.data('userName');
alert(username);
});




But it does not seem to work. What would be the proper approach to this ?