Link in der Bootstrap popover funktioniert nicht

Habe ich ein popover mit Fokus-trigger und einen link in der popover.

Html:

<div class="tree">
    <div class="html-popup">
        Popup text <a href="http://www.google.com" target="_top">Link somewhere</a>
    </div>
    <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
        Text that has a popover
    </a>
</div>

JavaScript:

$('.tree [data-toggle="popover"  ]').popover({
    html: true,
    content: function () {
        return $(this).prev().html();
    }
});

Hier ist ein Beispiel: JSFiddle

In Chrome den link öffnet, bevor das popover schließt aber in IE und Firefox-es schließt sich einfach der popover.

Habe ich zur Unterstützung von IE9 und halbwegs neue Versionen von Firefox. Wie kann ich den link öffnen, bevor Sie das popover schließt?

Dank!

  • Ich verstehe nicht, warum wollen Sie das Ziel _top. Es funktioniert nicht in Chrome auch nicht. Es funktioniert wie ein Ziel _blank, so ist es einfacher zu treffen, ein Ziel und bekommt die gleiche in jedem browser. Nein?
InformationsquelleAutor Mathias Rönnlund | 2014-11-19
  1. 5

    Entfernen Sie den Unterstrich vom Ziel innerhalb tag..Es wird wunderbar funktioniert, im IE 

        <div class="tree">
    <div class="html-popup"> Popup text <a href="http://www.google.com"   target="top">Link somewhere</a>
    </div>
<a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
Text that has a popover</a>
</div>
    • Hey Lanayx Überprüfen Sie die Lösung einfach ersetzen _top mit oben wie oben
    • CHECK OUT THIS FIDDLE
    • jsfiddle.net/LrL42m8k
    • Aditya nicht sicher, ob es ein BS zu ändern, aber das funktioniert nicht (genau mein problem). Der link ist da, aber anklicken bringt nichts - dh Sie haben nicht zu gehen Google.com
    InformationsquelleAutor Aditya Raval
  2. 3

    Habe ich spielte ein wenig mit bootstrap tooltip und eine quick-and-dirty Lösung wäre das entfernen der in der Nähe auf Unschärfe-Funktionalität und schließen Sie es, wenn jedes element geklickt wird, die außerhalb des tooltip.

    Hier ein kurzes Beispiel: https://jsfiddle.net/b8hjg5x9/ .

    $('.tree [data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return $(".html-popup").html();
    }
}).on('show.bs.popover', function() {
    $('[data-toggle="popover"]').popover('hide');
});

$('html').on('click', function (e) {
    if ($(e.target).data('toggle') !== 'popover') { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

    Hoffe, das hilft.

    InformationsquelleAutor BebliucGeorge
  3. 1

    Hinzufügen eines onclick auf den link:

    <a href="#" onclick="window.open('http://www.google.com/');\"> link </a>

    arbeitete für mich. Aber es wird nicht ausgelöst, mit der enter-Taste.

    InformationsquelleAutor Chamin Sandaruwan
  4. 0

    Haben Sie versucht, diesen code nur in jsfiddle?

    Falls ja, dies geschieht, weil diese Art des virtuellen ambient arbeitet mit iframe, was die meisten Browser nicht zulassen redirect aus Gründen der Sicherheit. Das entfernen der 'target' - Attribut, erhalten Sie die folgenden Fehler-Konsole:

    Load denied by X-Frame-Options: https://www.google.com.br/ nicht
    erlauben cross-origin-framing.

    Wenn Sie arbeiten in einem iframe eine gute option ist die änderung target="_blank" ansonsten sollte es funktionieren.

    • Ich aktualisiert die Fiddle zu verwenden _blank und jetzt IE und Firefox zu funktionieren scheint. Wir umgesetzt haben, dies in einem Kunden-Projekt, aber könnten Sie überprüfen, bevor ich daneben dein Kommentar als Antwort, dass dieses Update funktioniert nur im jsfiddle oder everwhere?
    • Ich habe eine einfache html-Datei mit deinem jsfiddle code und funktioniert normal, im FF und IE, aber getestet habe ich nur in den letzten Versionen. Hier ist der code, den ich getestet pastebin.com/G5vaYHiA
    • Hey, irgendwelche Fortschritte?
    • Ändern _top, _blank Dinge repariert, für den IE11, IE10 und FF35 aber leider nicht bei IE9. Kennst du eine Abhilfe für dieses?
    • Im Kompatibilitätsmodus funktioniert normal, ich hatte nur zu erlauben pop-UPS.
    InformationsquelleAutor m.rufca
  5. 0

    Sorry, kann nicht fügen Sie einen Kommentar auf deine Antwort matheusrufca, aber das hilft nicht mit IE9 und unteren. Das popover nur dissappears egal ist es von der gleichen Ursprungs sind oder nicht.

    • Die Frage sagt, das funktioniert nur auf Chrome. Getestet habe ich den code außerhalb jsfiddle und es funktioniert. Im IE Kompatibilitätsmodus funktioniert es auch gut. Es ist sehr seltsam, dass ein einfacher link innerhalb eines div-nicht öffnen, vielleicht könnte ein preventDefault Funktion.
    • Ich habe einfach versucht, den IE9-emulation und es funktioniert dort nicht. Im IE10-Modus link funktioniert gut. Sobald ich Unterstützung IE9 wie MathiasR hat, ich habe diese Frage.
    InformationsquelleAutor Lanayx
  6. 0

    Antwort auf BebliucGeorge.
    Dies funktioniert für einfache Fall, aber für 2 oder mehr QuickInfos führt eine neue bug - popover werden nicht geschlossen wenn ich auf einen anderen Umschalten.

    Example:

    https://jsfiddle.net/vc7zn1o6/29/

    • Hallo, Sie sir sind Recht. Dies kann umgangen werden, indem Sie schließen alle popovers, wenn die show.bs.popover-Ereignis ausgelöst wird. Ich aktualisiert meine Antwort mit dem Update.
    InformationsquelleAutor Lanayx
  7. 0

    Verwenden _blank statt _top im Anker ' s Ziel.
    Dann wird Ihr code sollte wie folgt Aussehen:

        <div class="tree">
       <div class="html-popup">
          Popup text <a href="http://www.google.com" target="_blank">Link somewhere</a>
      </div>
      <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom">
         Text that has a popover
      </a>
   </div>
    InformationsquelleAutor Jangya satapathy
  8. 0

    Ich glaube, dieses problem ist, weil man data-trigger="focus". Wenn Sie auf den link in der popover, 'focus' wird ausgelöst, und dann popover geschlossen. Zu dieser Zeit, klicken Sie auf den link Ereignis kann nicht excuted.
    Ich sloved dieses problem durch die Verzögerung verstecken popover nach click popover.

    Beispiel:
    $('[data-toggle=popover]').popover({ delay: { hide: 200 } });

    InformationsquelleAutor tardis
Schreibe einen Kommentar