web-dev-qa-db-fra.com

Comment déclencher de manière programmable FANCYBOX avec une inline DIV?

Je veux faire apparaître une fantaisie lorsque quelqu'un essaie de soumettre un formulaire. Donc j'ai ceci:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: '<h2>Hello Fancybox</h2>',
        modal: true
    });
    return false;
});

Fonctionne bien, mais je préférerais utiliser mon DIV que d'essayer de spécifier tout le HTML dans la chaîne de contenu. Puis-je le faire popup avec cette

<div style="display:none" id="access-policy">
blah blah blah
</div>

Au lieu?

jqueryfancybox
18
mpen

pour FANCYBOX V3 ou plus tard voir cette réponse

pour les anciennes versions:

Vous devez définir href Propriété L'ID DIV. Si vous utilisez $('#access-policy').show() in content Propriété La deuxième fois que vous ouvrez cette fantaisie ne montrera rien.

$('#login-form').submit(function(e) {
    $.fancybox({
        href: '#access-policy', 
        modal: true
    });
    return false;
});

Aussi dans le HTML doit être:

<div style="display:none">
    <div id="access-policy">
        blah blah blah
    </div>
</div>

:)

31
Marçal Juan

Les autres réponses doivent être mises à jour

parce que j'utilisais le code de la réponse accepté et je me suis gratté la tête pendant une demi-heure.

Dans le plus récent FANCYBOX 3, ils ont modifié certains noms d'options et comment utiliser certaines méthodes.

La version plus ancienne sur la façon d'ouvrir un élément en ligne:

$.fancybox({ // OUTDATED
    href: '#element-id', 
    modal: true
});

doit changer de

$.fancybox.open({ // FancyBox 3
    src: '#element-id', 
    modal: true
});

Notez la méthode ouverte et le changement HREF-> SRC.

Sans l'ouverture, vous obtiendrez une erreur de fantaisie n'est pas une erreur de fonction. Sans "SRC", vous obtiendrez un contenu demandé ne peut pas être chargé popup.

J'espère que cela aidera quelqu'un à éviter mes mêmes erreurs et que nous devons suivre la documentation sur celle-ci. C'est beaucoup plus difficile à dépasser.

8
Michael Shang

tu peux faire:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy').show(), 
        modal: true
    });
    return false;
});
6
Neal

Peu importe. content peut être un objet JQuery:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy'),
        modal: true
    });
    return false;
});

Mais le div doit être enveloppé dans une DIV cachée,

<div style="display:none"><div id="access-policy">
blah blah blah
</div></div>

Sinon, rien n'apparaîtra; Cela ne change pas la propriété d'affichage.

4
mpen

Le contenu est "n'importe quel HTML", alors obtenez le HTML de la DIV et donnez-le au contenu

content: $('#access-policy').html(),
3
amit_g

Cela démontre comment utiliser FANCYBOX sans nécessiter le <a href> élément de liaison.

Inline (1.3.4) :

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

Inline (2.1.5) :

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

iframe:

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
2
Ronald