Comment puis-je changer la couleur de superposition dans la fancyBox v2

Dans fancyBox la version 1, il y avait le overlayColor paramètre, mais dans la version 2, il ne semble pas fonctionner.

Modifiant le CSS ne fonctionne pas parce qu'il devient de plus écrit par le JavaScript dans le plugin.

Des idées?

InformationsquelleAutor Marius Ilie | 2012-03-16
  1. 15

    Fancybox v2.x API sont nouveaux et ne sont pas compatibles avec les versions précédentes pour overlayColor a été remplacé par le helpers => overlay => css => background-color option.

    Vous ne pas avoir à jouer avec l'original (js ou css) des fichiers, soit comme suggéré par @Sparky672 (qui est une mauvaise pratique idée). Vous pouvez définir cette option dans votre script personnalisé ... donc avoir ce html, par exemple:

    <a class="fancybox" href="images/01.jpg">open fancybox with a red overlay</a>

    utiliser un script personnalisé comme:

    $(".fancybox").fancybox({
  helpers : { 
   overlay: {
    opacity: 0.8, //or the opacity you want 
    css: {'background-color': '#ff0000'} //or your preferred hex color value
   } //overlay 
  } //helpers
}); //fancybox
    • Le vôtre est clairement la meilleure réponse, cependant, la modification du CSS ou JS ne peut pas être appelé sommairement "mauvaise pratique", c'est juste injustement inexactes. Pour ce cas particulier, le mal documenté helpers paramètre, évidemment, est préféré. Toutefois, pour les plugins sans la disponibilité d'un paramètre de votre choix, par exemple une personnalisation est impossible sans modifier le CSS et/ou JavaScript. Après tout, la modification du code existant n'est pas un long tronçon de simplement écrire votre propre plugin.
    • OK, je l'ai pris de retour ... et oui, vous avez raison: malheureusement, certaines options de ce plugin sont mal documentées.
    • c'est la réponse que je cherchais. Merci 🙂
    • Il ne fixe pas de la opacity.
    • malheureusement, cette réponse est obsolète parce que c'était pour fancybox v2.0.x. Les choses ont changé depuis la v2.1.x. Pour une mise à jour de l'information sur le même sujet, consultez fancyapps.com/fancybox/#useful N ° 1
    • aussi, vous pouvez consulter stackoverflow.com/a/15096928/1055987
    • Il ne fonctionne plus. Fancybox a été mis à jour.
    • votre sont corrects, cette réponse est de plus de 2 ans et valable pour les versions antérieures à la 2.1.x. Pour une mise à jour de répondre à vérifier stackoverflow.com/a/15096928/1055987 (comme je l'ai déjà commenté here il y a un an)

    InformationsquelleAutor JFK
  2. 5

    Firefox (et IE 9) n'aime pas la définition d'une superposition d'opacité.
    Chrome est bien avec elle, mais dans Firefox + IE9 l'opacité est appliqué à la popup lui-même. Ils semblent faire la superposition différemment pour la superposition et le contenu.

    Testé dans Fancybox 2.1.4

     helpers:
 {
       overlay:
       {
              css: { 'background': 'rgba(0, 0, 255, 0.5)' }
       }
 }

    Si vous définissez une valeur RGBA place, alors qu'il fonctionne. Vous devez utiliser background et pas background-color pour remplacer le css par défaut.

    Noter que le plugin lui-même utilise un semi-transparent PNG pour la superposition. C'est très bien, mais a deux downsites. Tout d'abord, il a à charge et à moins que vous pré-charger l'effet de fondu peut être un peu bégaya la première fois que vous ouvrez une fenêtre popup. Deuxième plupart des navigateurs supprimer la demande après que vous avez soumis un formulaire - de sorte que si vous pré-charger le PNG alors il n'y aura pas de superposition à tous.

    InformationsquelleAutor Simon_Weaver
  3. 2

    Vous pouvez cibler le style balise qui est appliqué à la #fancybox-overlay div à l'aide d'un sélecteur d'attribut, comme suit:

    CSS

    #fancybox-overlay[style] {
    background-color: blue !important;
}
    InformationsquelleAutor Andres Ilich
  4. 1

    De Fancybox v1.3:

    Superposition Des Options Par Défaut:

    • overlayOpacity: 0.3
    • overlayColor: #666

    Exemple De Travail:

    $(".fancybox").fancybox({
    overlayOpacity  : 0.8, //Set opacity to 0.8
    overlayColor    : "#000000" //Set color to Black
});
    InformationsquelleAutor P-S
  5. 0

    Options intégrées dans fancyBox v1 ne fonctionnera pas si elles ne sont pas intégrées dans fancyBox2. Et selon à la fancyBox v2 documentation, il n'y a pas overlayColor option.

    Ma suggestion est d'essayer et de changer le background de couleur à l'intérieur de la jquery.fancybox.css fichier pour #fancybox-overlay.

    #fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 1001;
    background: #000;  /* <<-- this one  */
}

    MODIFIER sur la base des observations:

    Techniquement bonne réponse est: vous ne pouvez pas définir la overlayColor option parce que la nouvelle version ne sera pas accepter que le paramètre obsolète.

    Toutefois, si vous êtes prêt à modifier le plugin, cela devrait le faire...

    autour de la ligne 1308 de jquery.fancybox.js vous verrez les options d'incrustation.

    opts = $.extend(true, {
    speedIn : 'fast',
    closeClick : true,
    opacity : 1,
    css : {
        background: 'black'  // <-- this one
    }
}, opts);

this.overlay = $('<div id="fancybox-overlay"></div>').css(opts.css).appendTo('body');
    • J'ai essayé la méthode css déjà. Il ne fonctionne pas parce que c'est remplacée par javascript 😐
    • voir mon édité réponse.
    • J'étais à la recherche de certaines options / extension ou css pour y parvenir. Je ne veux pas pirater le fichier js
    InformationsquelleAutor Sparky
  6. 0

    La css #fancybox-superposition ne semble pas travailler pour moi (fb2), que j'utilise .fancybox-peau fonctionne parfaitement.

    .fancybox-skin{
background-color:#121212!important;
}
    InformationsquelleAutor babyromeo
  7. 0

    Dans la dernière version de l'application d'assistance besoin du parent paramètre, comme ceci: 

    $.fancybox.helpers.overlay.open({parent: $('body')});
    InformationsquelleAutor drmartin
  8. 0

    utiliser les css pour bg:

    #fancy_bg
{
    background-color:000000 !important;
}
    InformationsquelleAutor I_CaR
  9. 0

    Aujourd'hui, cela fonctionne. Si vous voulez pas de couleur d'arrière-plan, réglez-le sur none;

    .fancybox-bg {
   background-color: #FF0004;
}
    InformationsquelleAutor Fuller93