magnific-popup passing a variable

Question

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.

score 8 · Accepted Answer · answered Jul 28 '13 at 06:29

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
});

score 0 · Answer 2 · answered Jul 28 '13 at 05:52

Try:

Javascript/jQuery

<script type="text/javascript">
$(document).ready(function() {

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

        function() {
            **Here some magic code that sets Var1 = X **
             Var1 = $('#myVar').val(); 
            });}
    });
});

Not quite sure what you are using Var1 for, but that is how you would get the value from the input into a global Var1 variable.

Let me know if I didn't understand what you're trying to do correctly.

magnific-popup passing a variable

2 Answers2