Popover wird versteckt unter der nav-bar in Twitter Bootstrap

Habe ich eine Hilfe-Schaltfläche, die in meiner navbar mit einem popover Funktionalität.

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

Javascript:

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

Aber wenn ich drauf klicke das popover versteckt sich hinter der nav-bar.

Muss ich wirklich zum festlegen der z-index manuell? Das wäre schmerzhaft. Ja, ich muss etwas falsch machen. Danke.

Welche version von Twitter Bootstrap? Ich hab die Prüfung in 2.1 und es funktioniert gut für mich: JSFiddle. Auch, wenn Sie mit 2.1, ist die Standard-trigger für popovers klicken statt hover, so können Sie rufen Sie einfach $('.timezone_help').popover() einmal an und werde alles tun, was Ihre aktuelle JS funktioniert.
Würde nicht Schaden, um auch mit uns zu teilen, was nicht-Bootstrap-CSS-Sie sind mit in das navbar.
vielen Dank so viel für Ihre Geige. Ich bin mit ver 2.1.1 und dies könnte tatsächlich das problem. Habe ich eine neue Geige hier und copy/Paste den code in es. Die Schaltflächen erscheinen nun auf der rechten Seite auf nav-bar (schwer zu scrollen). Aber sobald Sie auf die es die Spitze des Pfeils geht hinter die nav-bar!!! Scheint, wie zindex. Ich habe auch eingefügt in meine gesamte css-Code in es. jsfiddle.net/houmie/XRSFr/1
Versuchen Sie data-container="body" . siehe stackoverflow.com/questions/14025438/...

InformationsquelleAutor Houman | 2012-09-08

css twitter-bootstrap

19

Ersten, die Antwort auf Ihre Frage ist, dass popovers sind nicht dazu vorgesehen, in eine Feste Navigationsleiste. In der Variablen.weniger, finden Sie die folgende Liste mit den z-Indizes:
```
//Z-index master list
//-------------------------
//Used for a bird's eye view of components dependent on the z-axis
//Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;
```
Wie Sie sehen können, Popovers werden soll, schlüpfen Sie in die Feste Navigationsleiste. Aber Sie werden bemerken, dass die Tooltips nicht, und Sie können auch trigger: 'click' auf tooltips.

Andernfalls, wenn Sie deadset auf der popover, sind Sie gehen zu müssen, um manuell ändern des z-index. Im folgenden wird dieser aktiviert und dauerhaft ändern des z-index, so dass Sie nicht haben, um sorgen über es zu tun, jedes mal, wenn es zeigt, oder so etwas:
```
$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);
```
JSFiddle

Sekunde, nur eine Erklärung warum mein Beispiel schien zu arbeiten, in der Erwägung, dass deins nicht.

Den wesentlichen Punkt nicht den Unterschied zwischen unseren beiden Beispiele (mmfansler JSFiddle und houmie JSFiddle) war eigentlich kein Unterschied zwischen 2.1.0 und 2.1.1. Beide haben z-index: 1030 für Feste navbars und z-index: 1010 für popovers (das ist das, was Ihr beschweren).

Den wirklichen Punkt der Unterschied ist, dass meine 2.1.0 Beispiel ist auch das laden des responsive-code. Aus irgendeinem Grund BootstrapCDN verändert die Namenskonvention:
- bootstrap.min.css in der 2.1.0 wurde eine kombinierte version
- bootstrap.min.css in 2.1.1 in der nicht-reagieren nur
Ich vermute das ist ein Fehler, da mir das schreiben dieser bootstrap-kombiniert.min.css ist auch nicht zu reagieren!

Sowieso, der einzige Unterschied zwischen den beiden wirkt sich auf die popover-display:
```
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}
```
Diese Regel aber gilt nur für bestimmte media queries (was natürlich in JSFiddle aktiviert wird, da der viewport Rendern ist klein).

Sonst, wenn die Navigationsleiste ist nicht statisch, Sie werden weiterhin feststellen, dass die popovers unter der navbar.

Möchten Sie vielleicht, um ein Auge auf die BootstrapCDN Ausgabe #41

+1 für diese tolle Antwort. Der Grund, warum ich lieber mit popover über den tooltip, ist, dass auf iPads, die Sie nicht wirklich haben einen cursor und ein tooltip unbrauchbar. Während ein popover ist sehr viel iPad-ish. 🙂 Jetzt, da ich nur eine opoover auf nav-bar, ich habe betrogen, es zu schaffen, indem Sie diesen in meine css: .popover{ z-index: 1055; }. Ihre Lösung scheint mehr klug. In Bezug auf die BootstrapCDN, guter Fang. Das ist aber nur die online-version korrigieren? Die heruntergeladene bootstrap-Dateien sind nicht betroffen, richtig?
Wenn Sie .tooltip({trigger: "click"}) es wird mit Klicks, statt zu schweben, die Lösung Ihrer touch-interface Problem. Die BootstrapCDN Problem betrifft nicht die bootstrap-downloads. Der Weg, den ich gewählt zum ändern des z-index in meinem Beispiel war um es zu ändern, nur, dass ein popover, als ich persönlich würde nicht wollen, ändern Sie die Standardeinstellung für alle popovers. Schließlich, warum 1055? Wollen Sie wirklich den popover werden oben auf jeder modals?
Sie haben Recht, die 1030 ist ein besserer Wert. Und vielen Dank für die Klarstellungen.

InformationsquelleAutor merv
1

In meinem Fall, ich beschlossen wie folgt:
```
.navbar-fixed-top {
  z-index:1061;
}
```
Popovers Standard-index 1060, also alles, was oben ist, 1060 positioniert ist über Popovers

Vität für das falsche Deutsch, ich bin Brasilianische und ich bin mit Google Translate

InformationsquelleAutor Fabio Souza
0

setzen Sie diese Eigenschaften:
```
data-container="body" style="z-index:1000; position:relative"
```
z-index sollte max limit.

InformationsquelleAutor Nalan Madheswaran

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.