Position Fancybox 2 manuell

Ich kann mich nicht für das Leben, herauszufinden, wie ich 2 Fancybox neu positionieren kann left: 47px; und top: 147pxPosition Fancybox 2 manuell

ich durch den Quellcode lesen zu verwenden, und ohne es zu hacken, ich sehe nicht, eine Möglichkeit, die Positionierung zu überschreiben.

Einstellung autoCenter auf false nur stoppt die automatische Zentrierung nach der ersten Mal es tut es.

Die Verwendung von jQuery zum Ändern des CSS oder das Angeben eines benutzerdefinierten Wrappers zum Anwenden des CSS funktioniert ebenfalls nicht, da Fancybox immer Inline-CSS hinzufügt, das alle meine Versuche überschreibt.

Gibt es eine Möglichkeit, Fancybox zu sagen, dass sie aufhören soll, sich selbst zu positionieren und meine absolute Positionierung zu verwenden?

Quelle

2012-03-29 bafromca

Sie können es wahrscheinlich mit der schlecht dokumentierten 'Helfer:' Option tun. Ich würde es als Antwort posten, wenn ich den genauen Code finden könnte. – Sparky

Ich finde nichts. Ich denke nicht, was Sie tun möchten, ist eine Option, ohne den Quellcode des Plugins zu bearbeiten. Wenn Sie das tun, können Sie auch einfach Ihre zusätzlichen Positionierungsoptionen hinzufügen, damit das Plugin zumindest skalierbar bleibt. – Sparky

Sie können override inline CSS Stile mit dem !important Modifikator.

Für den Anwendungsfall Fancybox Im Folgenden wird die JavaScript Positionierung außer Kraft setzen:

.fancybox-wrap { 
    top: 147px !important; 
    left: 47px !important; 
}

Quelle

2012-03-29 19:53:40 leepowers

Das wird durch die Inline-CSS überschrieben, die Fancybox 2 mit jQuery's css() injiziert. – bafromca

Das ist seltsam - die '!wichtig "sollte jeden Inline-Stil außer Kraft setzen, einschließlich Styles, die mit' css() 'gesetzt wurden - siehe hier: http://jsfiddle.net/YKhEG/ - vielleicht ist' # fancybox-wrap' der falsche Selektor? – leepowers

Das ist es: es ist .fancybox-wrap. Du hast Recht, mehr brauche ich nicht. Vielen Dank! – bafromca

Können Sie die CSS nicht ändern, wie so? Offensichtlich Änderung der Marge Eigenschaft auf ‚oben‘ und ‚links‘

$("a.fancybox1").fancybox({ 
'hideOnContentClick': false, 
     'onComplete' : function() { 
      $("#fancybox-wrap").css('margin', 'auto'); 
     } 
    });

Quelle

2012-03-29 20:41:09 gerl

ich dieses Problem gelöst, indem das Hinzufügen manuell eine neue CSS-Klasse in den beforeShow-Handler. Ich habe fancybox2 benutzt.

css:

.fancybox-wrap22 { 
    top: 22% !important; 
}

js:

$(".open_fancybox").click(function() { 
    $.fancybox.open('<h1>lorem ipsum</h1>', { 
    beforeShow : function() { 
     $('.fancybox-wrap').addClass('fancybox-wrap22'); 
    } 
    }); 
    return false; 
});

Quelle

2012-06-11 14:31:26

Ich denke, man kann nicht die CSS auf diese Weise ändern, bewirken, dass der fancybox Kern den Stil Eigenschaft aller # fancybox-wrap bearbeitet die Zeit. Du musst also eine neue Klasse hinzufügen, wie in meinem Beispiel beschrieben. Ansonsten werden Sie keine sichtbaren Änderungen sehen.

Quelle

2012-10-02 12:20:02

Ich habe ein ähnliches Problem - ich möchte eine Fancybox manuell positionieren, aber es automatisch zentriert automatisch.

Ich löste es die Center-Funktion zu deaktivieren:

$.fancybox.center = function(){};

Quelle

2013-02-24 04:11:54

ich diese Lösung für fancybox2 gefunden. Sie können die standardmäßige _getPosition-Methode überschreiben, um zu verhindern, dass eine oder mehrere Dimensionen geändert werden.

// Disable vertical repositioning 
var orig = $.fancybox._getPosition; 
$.extend($.fancybox, { 
    _getPosition: function(onlyAbsolute) { 
     var rez = orig(onlyAbsolute); 
     delete rez.top; 
     return rez; 
    } 
});

Quelle

2014-11-30 22:19:19 TractorCow

Dies ist eine nette Lösung. Wie würdest du das erreichen, um fancybox über das Triggerelement zu positionieren und um 20 Pixel leicht nach rechts versetzt? Und was bedeutet 'onlyAbsolute' in deinem Codebeispiel? –

Lucas Teixeira hatte Recht! Das hat für mich funktioniert. Schalten Sie zuerst die Center-Funktion aus und verwenden Sie dann das Ereignis "Complete", um die Inline-CSS-Funktion wie gewünscht einzustellen.

<script> 
     jQuery(document).ready(function() { 

      //turn off center function 
      $.fancybox.center = function() { }; 

      //use onComplete event to modify inline css 
      $("#ModalPopup").fancybox({ 
       'modal': true, 
       'onComplete': function() { 
        $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); 
       } 
      }); 

     }); 
    </script>

Quelle

2016-03-01 17:14:15

Antwort

Verwandte Themen