Jquery-Offset-Funktion macht den oberen Stil eine negative Zahl in Firefox

Ich bin zu binden, um eine benutzerdefinierte Alarmbox mit fester Positionierung zu erstellen. Es funktioniert hervorragend in Chrome, aber ich kann die dynamische Position nicht direkt in Firefox finden.Jquery-Offset-Funktion macht den oberen Stil eine negative Zahl in Firefox

stellte ich einen modal Behälter die Größe des Dokuments

$('#modalContainer').height($.getDocHeight());

und dann die #alertBox div lebt in modalContainer und Position muss gleich: fixed Stil.

ich die Jquery-Offset-Funktion bin mit den oberen und linken Werten für #alertBox einzustellen etwa so:

var off_top=$(window).height()/3-$('#alertBox').height()/3; 
var off_top=100; 
var off_left=$(window).width()/2- $('#alertBox').width()/2; 
$('#alertBox').offset({top:off_top,left:off_left});

In Chrom der Spitzenwert wird auf 100 Pixel und erscheint auf dem Bildschirm einstellen. In Firefox bekomme ich eine unfassbar große Zahl für den Top-Wert wie -1084px.

Wenn ich die Werte .offset() und position() in console.log ausgibt, sind sie in chrome identisch. In Firefox, während der Offset-Wert genau das ausgibt, auf was ich ihn eingestellt habe, gibt die Funktion .position() die unangemessen große Zahl aus.

Ist dies eine bekannte Browser-Inkonsistenz? Muss ich das anders machen?

Quelle

2012-04-02 Ed Sullivan

Wenn es 'fixed' Positionierung, warum nicht css' top' verwenden und ' links um 40-50% um die Box zu zentrieren. http://jsfiddle.net/skram/XWN9G/ –

Versuchen Sie, Ihre Ausgangsposition als

$('#modalContainer').height(document.documentElement.clientHeight);

Einstellung, die Sie die height of the viewport bekommen sollte.

Als Alternative zur Berechnung Ihres Offset jedes Mal, wenn Sie margin: auto und position: absolute auf Ihrer Alarmbox verwenden könnten. Wahrscheinlich möchten Sie immer noch die Höhe des modalen Containers festlegen, aber die Zentrierung des Alarms wird automatisch durchgeführt.

HTML

<body> 
<p>Lorum ipsum ... </p> 
<div id='modalContainer'> 
    <div id='alertBox'> 
     <h1>Beware!</h1> 
    </div> 
</div> 
</body>

CSS

#modalContainer { 
    position: absolute; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#alertBox { 
    width: 300px; /*sample*/ 
    height: 200px; /*sample*/ 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

JavaScript

$('#modalContainer').height(document.documentElement.clientHeight);

Quelle

2012-04-02 21:09:55 devstruck

Danke, ich habe eine Kombination aus dieser Antwort sowie einige von dem, was ich hatte. Die absolute Positionierung funktionierte nicht, wenn der Browser gescrollt wurde, also habe ich die Position: fixiert gehalten und einen Randwert hinzugefügt. Als ich das tat, musste ich den oberen Wert nicht dynamisch ändern. Um die Box horizontal zentriert zu bekommen, habe ich immer noch den linken Offset verwendet, weil der automatische Randstil nicht angenommen wurde. Ich denke, das liegt daran, dass ich #alertBox dynamisch hinzugefügt und entfernt habe. –

@Ed Sullivan Gut zu wissen. Wundert mich, ob die Einstellung von #modalContainer auf fixed funktionieren würde. Vielleicht muss ich das versuchen. – devstruck

Ich bin mir nicht sicher, dass das in diesem Fall funktionieren würde. modalContainer muss den gesamten Körper abdecken, sodass andere Eigenschaften mit niedrigeren Z-Indizes nicht angeklickt werden können. –

Jquery-Offset-Funktion macht den oberen Stil eine negative Zahl in Firefox

Antwort

Verwandte Themen