Wie zu verwenden fancybox-dialog-plugin zur Anzeige eines div-direkt

Ich habe eine javascript-Funktion confirm() , verwendet die JQuery UI-Bibliothek zum öffnen von Dialogfeldern.

Beispiel:

jQuery('#confirm-popup').dialog('open');

Diese öffnet sich und macht ein div mit der id confirm-popup. Ich würde gerne wechseln, fancybox, da Sie eine elastische Wirkung, die ich brauche. Also ich war in der Hoffnung, dass die folgenden funktionieren würde, nachdem ich die fancybox installiert.

jQuery('confirm-popup').fancybox();

Diese scheint nicht zu funktionieren. Soweit ich sehen kann, können Sie nur aufrufen, die fancybox() Funktion auf ein Anker-tag. Ich will nicht von Anker-tags, denn dies würde eine Menge änderungen am code für mich, wie ich bereits zugeordnet haben meine bestätigen Funktion dieser tags.

Idealerweise würde ich gerne nehmen Sie einfach das div-element, und zeigen Sie in ähnlicher Weise zu den jQuery-UI-dialog-Methode? Gibt es eine Möglichkeit, dies zu tun mit Fancybox?

InformationsquelleAutor Brian Connolly | 2010-11-18

  1. 5

    Wenn Sie verwenden möchten FancyBox als dialog, Sie können es aufrufen, direkt als solche:

    $.fancybox({
    'width'              : '60%',
    'height'             : '65%',
    'autoScale'          : true,
    'hideOnContentClick' : false,
    'href'               : someUrl,
    'callbackOnShow'     : function(){ ... },
    'onClosed'           : function(){...},                     
    'type'               : 'iframe'
});

    InformationsquelleAutor Griff

  2. 2

    Können Sie fancybox für ein div, aber meine erste Frage ist, ob Sie nach Links aus Ihrer # für die ID? Es wäre hilfreich, wenn Sie schreiben, die HTML-und wo Ihre fancybox() wird aufgerufen, auch, wie es sein sollte im Dokument.bereit. Und Sie wollen zu nennen .fancybox() auf, was öffnet den dialog, statt Sie direkt auf dem dialog.

    In falls Sie es verpasst, hier ist ein Beispiel aus dem fancybox Website:

    <script>
    $(document).ready(function() {
      $("#inline").fancybox();
    });
</script>
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

    InformationsquelleAutor Jarrett Widman

  3. 1

    Diese veranschaulicht, wie fancybox (1.3.4), ohne dass die <a href> link-element durch Aufruf der fancybox direkt.

    Inline:

    <div style="display:none;">
    <div id="confirm-popup">
        dialog content
    </div>
</div>

$('#myform').submit(function() {
    $.fancybox({
        type: 'inline',
        content: '#confirm-popup'
    });
});

    Iframe:

    $('#myform').submit(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});

    InformationsquelleAutor Ronald

Schreibe einen Kommentar