magnific-popup passing a variable

javascript, jquery, magnific-popup

Solution

How about using a separate click handler outside the magnificPopup settings that changes the value of your input whenever a link is clicked, just make sure to bind it before initializing the plugin

HTML

Using data attributes as correctly suggested

<a href="#test-popup" data-var1="X" class="open-popup-link">Show inline popup</a>

Javascript

$('.open-popup-link').click(function(){
    $('#myVar').val($(this).data('var1'));
});

$('.open_popup_link').magnificPopup({
   type:'inline',
   midClick: true
});

Problem

I'm trying to make magnific popup contain some forms. I would like to pass variables through the html anchor to the final popup. As Var1 in this pseudocode: ``` <!-- HTML launcher element --> <a href="#test-popup?Var1=X" class="open-popup-link">Show inline popup</a> <!-- Popup itself --> <div id="test-popup"> <form method="post" action=""> <input type="hidden" id="myVar" name="Var1" value="[placeholder]" /> <input type="submit" /> </form> </div> <!-- Inizialization --> <script type="text/javascript"> $(document).ready(function() { $('.open_popup_link').magnificPopup({ type:'inline', midClick: true, function() { **Here some magic code that sets Var1 = X ** $('#myVar').attr('value', function(i, attr){ return attr.replace('[placeholder]', Var1); });} }); }); </script> ``` I need this because I will generate serverside (w. PHP) the launchers so that each link will generate different form data. edit: One approach i thought at was to use custom attributes in the launcher, eg: ``` <a href="#test-popup" data-var1="X" class="open-popup-link">Show inline popup</a> ``` But I couldn't really get the right jQuery syntax for nesting the attributes processing INSIDE the magnific-popup inizialization. My js/jquery knowledge is very basic, so thank you for any hint.

Original source