JS:
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>',
content : 'test'
})
$('html').click(function() {
$('#close').popover('hide');
});
});
HTML:
<button type="button" id="example" class="btn btn-primary" ></button>
Ich schreibe, dein Code zeigt dein Popup nicht.
Ist jemand auf dieses Problem gestoßen?
jquery
twitter-bootstrap
popover
Danglebz Highbreed
quelle
quelle
data-dismiss="popover"
anstelle vononclick
funktioniert nicht. Dies ist ein gut dokumentiertes Problem.Ich musste etwas finden, das für mehrere Popover und in Bootstrap 3 funktioniert.
Folgendes habe ich getan:
Ich hatte mehrere Elemente, für die ich ein Popover haben wollte, also wollte ich keine IDs verwenden.
Das Markup könnte sein:
<button class="btn btn-link foo" type="button">Show Popover 1</button> <button class="btn btn-link foo" type="button">Show Popover 2</button> <button class="btn btn-link foo" type="button">Show Popover 3</button>
Der Inhalt für die Schaltflächen zum Speichern und Schließen im Popover:
var contentHtml = [ '<div>', '<button class="btn btn-link cancel">Cancel</button>', '<button class="btn btn-primary save">Save</button>', '</div>'].join('\n');
und das Javascript für alle 3 Schaltflächen:
Diese Methode funktioniert, wenn der Container standardmäßig nicht an body angehängt ist.
$('.foo').popover({ title: 'Bar', html: true, content: contentHtml, trigger: 'manual' }).on('shown.bs.popover', function () { var $popup = $(this); $(this).next('.popover').find('button.cancel').click(function (e) { $popup.popover('hide'); }); $(this).next('.popover').find('button.save').click(function (e) { $popup.popover('hide'); }); });
Wenn der Behälter an "Körper" befestigt ist
Verwenden Sie dann die von beschriebene Arie, um das Popup zu finden und es auszublenden.
$('.foo').popover({ title: 'Bar', html: true, content: contentHtml, container: 'body', trigger: 'manual' }).on('shown.bs.popover', function (eventShown) { var $popup = $('#' + $(eventShown.target).attr('aria-describedby')); $popup.find('button.cancel').click(function (e) { $popup.popover('hide'); }); $popup.find('button.save').click(function (e) { $popup.popover('hide'); }); });
quelle
popup.find('button.cancel').on('click',function(e) {...}
.close
mit Hover-Effekt, sodass das Einfügen der Schaltfläche zum Schließen in Titel oder Inhalt so einfach wie möglich ist<span class=close>×</span>
.Ich fand andere Antworten entweder nicht allgemein genug oder zu kompliziert. Hier ist eine einfache, die immer funktionieren sollte (für Bootstrap 3):
$('[data-toggle="popover"]').each(function () { var button = $(this); button.popover().on('shown.bs.popover', function() { button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () { button.popover('toggle'); }); }); });
Fügen Sie dann einfach ein Attribut
data-dismiss="popover"
in Ihre Schaltfläche zum Schließen ein. Stellen Sie außerdem sicher, dass Sie es nicht anpopover('hide')
anderer Stelle in Ihrem Code verwenden, da es das Popup verbirgt, aber seinen internen Status im Bootstrap-Code nicht richtig festlegt, was bei der nächsten Verwendung zu Problemen führen kannpopover('toggle')
.quelle
.popover('toggle');
tut die Verwendung von Bootstrap 3 nie etwas für mich, wo.popover('hide');
es funktioniert. Davon abgesehen ist diese Lösung mein Favorit. Vielen Dank!popover('hide')
, das Popover nicht zu zerstören, sondern es nur zu verbergen?$(button.data('bs.popover').tip).find('[data-dismiss="popover"]')
in modernen Bootstrap sein (> = 4?)Vorherige Beispiele haben zwei Hauptnachteile:
Nachfolgend finden Sie eine Lösung, die keine derartigen Nachteile aufweist.
Standardmäßig wird das 'Popover'-Element unmittelbar nach dem referenzierten Element im DOM eingefügt (beachten Sie dann, dass das referenzierte Element und das Popover unmittelbare Geschwisterelemente sind). Wenn Sie also auf die Schaltfläche "Schließen" klicken, können Sie einfach nach dem nächstgelegenen übergeordneten Element "div.popover" und dann nach dem unmittelbar vorhergehenden Geschwisterelement dieses übergeordneten Elements suchen.
Fügen Sie einfach den folgenden Code in den 'onclick'-Handler der' close'-Schaltfläche ein:
$(this).closest('div.popover').popover('hide');
Beispiel:
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">×</button>'; $loginForm.popover({ placement: 'auto left', trigger: 'manual', html: true, title: 'Alert' + genericCloseBtnHtml, content: 'invalid email and/or password' });
quelle
sanitize: false
zu den Popover-Optionen hinzufügenFolgendes habe ich gerade in meinem Projekt verwendet. Und ich hoffe, es kann Ihnen helfen
<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true data-original-title="weclome to use the sql query" data-content="content">example</a> $('#manualinputlabel').click(function(e) { $('.popover-title').append('<button id="popovercloseid" type="button" class="close">×</button>'); $(this).popover(); }); $(document).click(function(e) { if(e.target.id=="popovercloseid" ) { $('#manualinputlabel').popover('hide'); } });
quelle
×
Symbol innerhalb desh3.popover-title
Objekts vertikal zentrieren?line-height: 0.7 !important;
und sah gut ausIch habe viele der genannten Codebeispiele überprüft und für mich funktioniert der Ansatz von Chris perfekt. Ich habe meinen Code hier hinzugefügt, um eine funktionierende Demo davon zu haben.
Ich habe es mit Bootstrap 3.3.1 getestet und ich habe es nicht mit einer älteren Version getestet. Aber es funktioniert definitiv nicht mit 2.x, da das
shown.bs.popover
Event mit 3.x eingeführt wurde.$(function() { var createPopover = function (item, title) { var $pop = $(item); $pop.popover({ placement: 'right', title: ( title || ' ' ) + ' <a class="close" href="#">×</a>', trigger: 'click', html: true, content: function () { return $('#popup-content').html(); } }).on('shown.bs.popover', function(e) { //console.log('shown triggered'); // 'aria-describedby' is the id of the current popover var current_popover = '#' + $(e.target).attr('aria-describedby'); var $cur_pop = $(current_popover); $cur_pop.find('.close').click(function(){ //console.log('close triggered'); $pop.popover('hide'); }); $cur_pop.find('.OK').click(function(){ //console.log('OK triggered'); $pop.popover('hide'); }); }); return $pop; }; // create popover createPopover('#showPopover', 'Demo popover!'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button> <div id="popup-content" class="hide"> <p>Simple popover with a close button.</p> <button class="btn btn-primary OK">OK</button> </div>
quelle
$cur_pop.popover('hide');
Der Trick besteht darin, den aktuellen Popover mit .data ('bs.popover') abzurufen. Tip () :
$('#my_trigger').popover().on('shown.bs.popover', function() { // Define elements var current_trigger=$(this); var current_popover=current_trigger.data('bs.popover').tip(); // Activate close button current_popover.find('button.close').click(function() { current_trigger.popover('hide'); }); });
quelle
Ich wollte nur die Antwort aktualisieren. Laut Swashata Ghosh ist die folgende Methode für Moi einfacher:
HTML:
<button type="button" class="btn btn-primary example">Example</button>
JS:
$('.example').popover({ title: function() { return 'Popup title' + '<button class="close">×</button>'; }, content: 'Popup content', trigger: 'hover', html: true }); $('.popover button.close').click(function() { $(this).popover('toggle'); });
quelle
Dies funktioniert mit mehreren Popovers, und ich habe auch ein wenig mehr zusätzliches JS hinzugefügt, um die Z-Index-Probleme zu lösen, die bei überlappenden Popovers auftreten:
http://jsfiddle.net/erik1337/fvE22/
JavaScript:
var $elements = $('.my-popover'); $elements.each(function () { var $element = $(this); $element.popover({ html: true, placement: 'top', container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier content: $('#content').html() }); $element.on('shown.bs.popover', function (e) { var popover = $element.data('bs.popover'); if (typeof popover !== "undefined") { var $tip = popover.tip(); zindex = $tip.css('z-index'); $tip.find('.close').bind('click', function () { popover.hide(); }); $tip.mouseover(function (e) { $tip.css('z-index', function () { return zindex + 1; }); }) .mouseout(function () { $tip.css('z-index', function () { return zindex; }); }); } }); });
HTML:
<div class="container-fluid"> <div class="well popover-demo col-md-12"> <div class="page-header"> <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3> </div> <div class="btn-group"> <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button> <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button> <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button> </div> </div> </div> <div id="content" class="hidden"> <button type="button" class="close">×</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
CSS:
/* Make the well behave for the demo */ .popover-demo { margin-top: 5em } /* Popover styles */ .popover .close { position:absolute; top: 8px; right: 10px; } .popover-title { padding-right: 30px; }
quelle
Ich habe Probleme mit diesem und dies ist der einfachste Weg, es zu tun, 3 Zeilen von js:
$(document).ready(function() { // This is to overwrite the boostrap default and show it allways $('#myPopUp').popover('show'); // This is to destroy the popover when you click the title $('.popover-title').click(function(){ $('#myPopUp').popover('destroy'); }); });
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; /* Just to align my example */ .btn { margin: 90px auto; margin-left: 90px; } /* Styles for header */ .popover-title { border: 0; background: transparent; cursor: pointer; display: inline-block; float: right; text-align: right; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>
quelle
Versuche dies:
$(function(){ $("#example") .popover({ title : 'tile', content : 'test' }) .on('shown', function(e){ var popover = $(this).data('popover'), $tip = popover.tip(); var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>') .click(function(){ popover.hide(); }); $('.popover-title', $tip).append(close); }); });
Anstatt die Schaltfläche als Markup-Zeichenfolge hinzuzufügen, ist es viel einfacher, wenn Sie eine mit jQuery umschlossene Schaltfläche haben, da Sie dann viel sauberer binden können. Dies fehlt zwar leider im Bootstrap-Code, aber diese Problemumgehung funktioniert für mich und kann auf Wunsch auf alle Popover angewendet werden.
quelle
Hier ist eine "Cheat" -Lösung:
Befolgen Sie die üblichen Anweisungen für ein abweisbares Popup.
Dann schlagen Sie mit CSS ein 'X' in das Feld.
CSS:
.popover-header::after { content: "X"; position: absolute; top: 1ex; right: 1ex; }
JQUERY:
$('.popover-dismiss').popover({ trigger: 'focus' });
HTML:
<a data-toggle="popover" data-trigger="focus" tabindex="0" title="Native Hawaiian or Other Pacific Islander" data-content="A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.">?</a>
Technisch gesehen ist es daher abweisbar, wenn jemand auf etwas anderes als das "X" klickt, aber das ist zumindest in meinem Szenario kein Problem.
quelle
$popover = $el.popover({ html: true placement: 'left' content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>' trigger: 'manual' container: $container // to contain the popup code }); $popover.on('shown', function() { $container.find('.popover-content a').click( function() { $popover.popover('destroy') }); }); $popover.popover('show')'
quelle
$(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">×</button></span>', content : 'test' }) $(document).on('click', '#close', function (evente) { $("#example").popover('hide'); }); $("#close").click(function(event) { $("#example").popover('hide'); }); }); <button type="button" id="example" class="btn btn-primary" >click</button>
quelle
$('.tree span').each(function () { var $popOverThis = $(this); $popOverThis.popover({ trigger: 'click', container: 'body', placement: 'right', title: $popOverThis.html() + '<button type="button" id="close" class="close" ">×</button>', html: true, content: $popOverThis.parent().children("div.chmurka").eq(0).html() }).on('shown.bs.popover', function (e) { var $element = $(this); $("#close").click(function () { $element.trigger("click"); }); }); });
Wenn Sie auf Element klicken und Ihr Popup anzeigen, können Sie als Nächstes das Ereignis show.bs.popover auslösen. In diesem Element erhalten Sie ein Element, in dessen Auslöser Sie klicken, um Ihr Popover zu schließen.
quelle
FWIW, hier ist die generische Lösung, die ich verwende. Ich verwende Bootstrap 3, aber ich denke, der allgemeine Ansatz sollte auch mit Bootstrap 2 funktionieren.
Die Lösung aktiviert Popovers und fügt eine Schaltfläche zum Schließen für alle Popovers hinzu, die durch das Tag 'rel = "popover"' unter Verwendung eines generischen JS-Codeblocks gekennzeichnet sind. Abgesehen von der (Standard-) Anforderung, dass ein rel = "popover" -Tag vorhanden sein muss, können Sie eine beliebige Anzahl von Popovers auf der Seite platzieren, und Sie müssen ihre IDs nicht kennen - tatsächlich benötigen sie keine IDs überhaupt. Sie müssen das HTML-Tag-Format 'Datentitel' verwenden, um das title-Attribut Ihrer Popovers festzulegen, und data-html auf "true" setzen.
Der Trick, den ich für notwendig hielt, bestand darin, eine indizierte Karte mit Verweisen auf die Popover-Objekte ("po_map") zu erstellen. Dann kann ich über HTML einen 'onclick'-Handler hinzufügen, der über den von JQuery dafür angegebenen Index auf das Popover-Objekt verweist ("p_list [' + index + ']. Popover (\' toggle \ ')"). Auf diese Weise muss ich mich nicht um die IDs der Popover-Objekte kümmern, da ich eine Karte mit Verweisen auf die Objekte selbst mit einem von JQuery bereitgestellten eindeutigen Index habe.
Hier ist das Javascript:
var po_map = new Object(); function enablePopovers() { $("[rel='popover']").each(function(index) { var po=$(this); po_map[index]=po; po.attr("data-title",po.attr("data-title")+ '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">×</button>'); po.popover({}); }); } $(document).ready(function() { enablePopovers() });
Mit dieser Lösung kann ich auf einfache Weise alle Popover auf meiner Website schließen.
quelle
Ich fand den folgenden Code sehr nützlich (entnommen aus https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/ ):
$('[data-toggle="popover"]').popover({ title: function(){ return $(this).data('title')+'<span class="close" style="margin-top: -5px">×</span>'; } }).on('shown.bs.popover', function(e){ var popover = $(this); $(this).parent().find('div.popover .close').on('click', function(e){ popover.popover('hide'); }); });
quelle
Sticky on Hover, HTML:
<a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a>
Javascript:
$('[data-toggle=popover]').hover(function(e) { if( !$(".popover").is(':visible') ) { var el = this; $(el).popover('show'); $(".popover > h3").append('<span class="close icon icon-remove"></span>') .find('.close').on('click', function(e) { e.preventDefault(); $(el).popover('hide'); } ); } });
quelle
Fügen Sie dies in Ihren Titel-Popover-Konstruktor ein ...
'<button class="btn btn-danger btn-xs pull-right" onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon glyphicon-remove"></span></button>some text'
... um einen kleinen roten 'x'-Knopf in der oberen rechten Ecke zu erhalten
//$('[data-toggle=popover]').popover({title:that string here})
quelle
Für alle, die noch ein wenig verwirrt sind:
So funktioniert es, wenn Sie das Popover umschalten, nachdem Sie es angezeigt haben. Wählen Sie dieselbe Schaltfläche aus, mit der Sie es ausgelöst haben, und rufen Sie .popover ('umschalten') auf.
In diesem Fall lautet der Code zum Schließen des Popovers wie folgt:
$ ('# example'). popover ('toggle');
quelle
Als sehr einfache Lösung habe ich Folgendes getan:
1) Fügen Sie das folgende CSS hinzu:
.sub_step_info .popover::after { content:url('/images/cross.png'); position:absolute; display:inline-block; top:15px; right:5px; width:15px; text-align:center; cursor:pointer; }
2)
data-trigger="manual"
Stellen Sie das Popover-Triggerelement ein3) Dann basierend auf https://github.com/twbs/bootstrap/issues/16802 :
$('[data-trigger="manual"]').click(function() { $(this).popover('toggle'); }).blur(function() { $(this).popover('hide'); });
Dies basiert auf der Grundlage, dass eine beliebige Stelle im Popover anklickbar ist. Wenn Sie sich jedoch auf das Kreuz konzentrieren, fördern Sie das gewünschte Verhalten.
quelle
Für mich ist dies die einfachste Lösung, um einem Popover eine Schaltfläche zum Schließen hinzuzufügen.
HTML:
<button type="button" id="popover" class="btn btn-primary" data-toggle="popover" title="POpover" data-html="true"> Show popover </button> <div id="popover-content" style="display:none"> <!--Your content--> <button type="submit" class="btn btn-outline-primary" id="create_btn">Create</button> <button type="button" class="btn btn-outline-primary" id="close_popover">Cancel</button> </div>
Javascript:
document.addEventListener("click",function(e){ // Close the popover if (e.target.id == "close_popover"){ $("[data-toggle=popover]").popover('hide'); } });
quelle
Ich hatte das Problem, dass der Tooltip einige funky Sachen machte, als auf die Schaltfläche zum Schließen geklickt wurde. Um dies zu umgehen, habe ich eine
span
anstelle einer Schaltfläche verwendet. Wenn auf die Schaltfläche zum Schließen geklickt wurde, musste ich nach dem Schließen zweimal auf den Tooltip klicken, um ihn wieder zu öffnen. Um dies zu umgehen, habe ich einfach die.click()
unten gezeigte Methode verwendet .<span tabindex='0' class='tooltip-close close'>×</span>
$('#myTooltip').tooltip({ html: true, title: "Hello From Tooltip", trigger: 'click' }); $("body").on("click", ".tooltip-close", function (e) { else { $('.tooltip').remove(); $('#postal-premium-tooltip').click(); } });
quelle
Dies ist eine funktionierende Lösung, die auf der obigen Antwort von @Chris basiert, jedoch so korrigiert wurde, dass Sie beim Klicken in Folgefolgen auf das Triggerelement nicht zweimal auf das Element klicken müssen.
Durch die
.popover('hide)
manuelle Verwendung wird der interne Status der Bootstraps durcheinander gebracht, wie in den Kommentaren angegeben.var closePopover = function(eventShown) { // Set the reference to the calling element var $caller = $('#' + this.id); // Set the reference to the popover var $popover = $('#' + $(eventShown.target).attr('aria-describedby')); // Unbind any pre-existing event handlers to prevent duplicate clicks $popover.find('.popover-close').off('click'); // Bind event handler to close button $popover.find('.popover-close').on('click', function(e) { // Trigger a click on the calling element, to maintain bootstrap's internal state $caller.trigger('click'); }); } $('.popoverTriggerElement').popover({ trigger: 'click' }) .on('shown.bs.popover', closePopover)
Jetzt können Sie die Schaltfläche zum Schließen verwenden, ohne die Klickereignisse zu duplizieren und den internen Status der Bootstraps zu überprüfen, damit sie wie erwartet funktionieren.
quelle
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.popover-1.1.2.js"></script> <script type="text/javascript"> $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button></span>', content : 'test' }) $("#close").click(function(event) { $("#example").popover('hide'); }); }); </script> <button type="button" id="example" class="btn btn-primary" >click</button>
quelle
#close
existiert nur, wenn das Popover aktiv ist,click
ist nie gebunden. Versuchen Siealert($("#close").length);
(es warnt 0)