JQuery FancyBox: Passing a parameter to an inline window

Navigation
0

I have 5 buttons that open a window using Fancybox inline modal, and the moment I open this window I need to pick a parameter or some way to show 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 that way, but FormaPgto always comes out undefined, would I have another more appropriate way?

    
asked by anonymous 31.08.2017 / 17:10

1 answer

0

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

<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 the information and plays into the modal: 

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

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

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

Set the fancybox class to all <a> links, not fancybox1, fancybox2 ...

    
31.08.2017 / 17:39
Bar Chart PrimeFaces Bootstrap - Testimonial