Jquery Fancybox: Pass a parameter to an inline window

Question

I have 5 buttons that open a window using Fancybox modal inline, and the moment I open this window I need to take a parameter or some way to show which was the button that triggered the event:

    <a class="btn btn-success fancybox1" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoDinheiro">F2 - DINHEIRO</a>
    <a class="btn btn-primary fancybox2" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCheque">F3 - CHEQUE</a>
    <a class="btn btn-danger fancybox3" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCartaoCredito">F4 - CARTÃO CRÉDITO</a>
    <a class="btn btn-info fancybox4" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCartaoDebito">F5 - CARTÃO DÉBITO</a>
    <a class="btn btn-warning fancybox5" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCrediario">F6 - CREDIÁRIO LOJA</a>

                <div id="divFormaPgto" style="display: none">
                    <h1 onclick="alert($.fancybox.FormaPgto);">RECEBIDO</h1>
                    <div>

                    </div>
                    <br />
    <a href="javascript:;" onclick="$.fancybox.close();">Close</a>
                </div>

.

    <script>
$(document).ready(function () {
    $('a.fancybox1').fancybox({
        'modal': true,
        'FormaPgto': 'dinheiro'
    });

    $('a.fancybox2').fancybox({
        'modal': true
    });

    $('a.fancybox3').fancybox({
        'modal': true
    });

    $('a.fancybox4').fancybox({
        'modal': true
    });

    $('a.fancybox5').fancybox({
        'modal': true
    });
});
    </script>

I was trying to pass this way, but Formapgto always leaves Undefined, would have another more suitable way?

Answer 1

You can add an attribute data-tipopag at each link <a> that will open the modal and capture later:

<a data-tipopag="Dinheiro" class="btn btn-success fancybox" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoDinheiro">F2 - DINHEIRO</a>
<a data-tipopag="Cheque" class="btn btn-primary fancybox" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCheque">F3 - CHEQUE</a>
<a data-tipopag="Cartão de Crédito" class="btn btn-danger fancybox" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCartaoCredito">F4 - CARTÃO CRÉDITO</a>
<a data-tipopag="Cartão de Débito" class="btn btn-info fancybox" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCartaoDebito">F5 - CARTÃO DÉBITO</a>
<a data-tipopag="Crediário Loja" class="btn btn-warning fancybox" href="#divFormaPgto" style="font-size: 22px; width: 100%;" id="btnPtgoCrediario">F6 - CREDIÁRIO LOJA</a>

And include a script that captures information and plays inside the modal:

$("a.fancybox").on("click",function(){
    $("#divFormaPgto h1").attr("onclick","alert('"+$(this).attr("data-tipopag")+"')");
});

Do not need to apply the Fancybox for each link in the script, just call it 1 time:

$(document).ready(function () {
    $('a.fancybox').fancybox({
        'modal': true
    });
});

Put the class fancybox at all links <a>, and not fancybox1, fancybox2...