it-swarm.com.de

Wie man den close-Button in das Popover für Bootstrap einfügt

JS:  

$(function(){
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>',
    content : 'test'
  })
  $('html').click(function() {
    $('#close').popover('hide');
  });
});

HTML:

<button type="button" id="example" class="btn btn-primary" ></button>

ich schreibe, dass Ihr Code nicht Ihr Popup anzeigt.

jemand stößt auf dieses Problem?

70

Sie müssen das Markup richtig machen

<button type="button" id="example" class="btn btn-primary">example</button>

Eine Möglichkeit besteht darin, den Close-Handler im Element selbst anzubringen. Dies funktioniert folgendermaßen:

$(document).ready(function() {
    $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    });
});  
80
davidkonrad

Ich musste etwas finden, das für mehrere Popovers und in Bootstrap 3 funktioniert.

Folgendes habe ich getan:

Ich hatte mehrere Elemente, für die ich eine Popover-Arbeit machen 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 Buttons:

Diese Methode funktioniert, wenn der Container standardmäßig nicht an den Körper 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 'body' angehängt ist

Verwenden Sie dann die beschriebene Arie, um das Popup zu finden und 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');
    });
});
31
Chris

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 das Attribut data-dismiss="popover" in Ihre Schließen-Schaltfläche hinzu. Stellen Sie außerdem sicher, dass Sie popover('hide') nicht an anderer Stelle in Ihrem Code verwenden, da das Popup ausgeblendet wird, der interne Status jedoch nicht ordnungsgemäß im Bootstrap-Code festgelegt wird. Dies führt beim nächsten Aufruf von popover('toggle') zu Problemen.

25
youen

enter image description here

Folgendes 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">&times;</button>');
              $(this).popover();

          });

      $(document).click(function(e) {
         if(e.target.id=="popovercloseid" )
         {
              $('#manualinputlabel').popover('hide');                
         }

      });
13
chunguiw

Frühere Beispiele haben zwei Hauptnachteile:

  1. Die Schaltfläche 'Schließen' muss auf irgendeine Weise die ID des referenzierten Elements kennen.
  2. Das Hinzufügen des "click.bs.popover" -Ereignisses um einen "Klick" -Listener zum Schließen-Button. Da dies auch keine gute Lösung ist, würden Sie bei jeder Anzeige des Popovers einen solchen Listener hinzufügen.

Nachfolgend finden Sie eine Lösung, die solche Nachteile nicht 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 gleichgeordnete Elemente sind). Wenn Sie auf die Schaltfläche 'Schließen' klicken, können Sie einfach nach dem nächstgelegenen übergeordneten 'div.popover' suchen und dann nach dem unmittelbar vorangehenden gleichgeordneten Element 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">&times;</button>';

$loginForm.popover({
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
});
13
user2957865

Ich 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 nicht mit einer älteren Version getestet. Aber es funktioniert definitiv nicht mit 2.x, da das shown.bs.popover-Ereignis mit 3.x eingeführt wurde.

$(function() {
  
  var createPopover = function (item, title) {
                       
        var $pop = $(item);
        
        $pop.popover({
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</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>

9
AWolf

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');
    });
});
5
Bogdanio

Dies funktioniert mit mehreren Popovers und ich habe ein paar zusätzliche JS hinzugefügt, um die Z-Index-Probleme zu behandeln, 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">&times;</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;
}
4
erik1337

Ich habe Probleme mit diesem und dies ist der einfachste Weg, es zu tun, 3 Zeilen von js:

  1. Fügen Sie im Titel des Popovers ein Kreuz hinzu
  2. verwenden Sie das js-Snippet, um den Popover anzuzeigen und durch Klicken auf die Kopfzeile zu schließen
  3. Verwenden Sie ein bisschen CSS, um es schön zu machen

 enter image description here

$(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>  
 

4
juandiegoles

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">&times;</span></button>')
        .click(function(){
          popover.hide();
        });
      $('.popover-title', $tip).append(close);
    });
});

Anstatt die Schaltfläche als Markierungszeichenfolge hinzuzufügen, ist es viel einfacher, wenn Sie eine jQuery-Schaltfläche haben, die Sie umschließen können, da Sie sie viel sauberer binden können. Dies fehlt zwar leider im Bootstrap-Code, aber diese Problemumgehung funktioniert für mich und könnte auf Wunsch für alle Popovers erweitert werden.

3
Angry Dan

Wollte nur die Antwort aktualisieren. Gemäß Swashata Ghosh ist der folgende einfache Weg für moi:

HTML:

<button type="button" class="btn btn-primary example">Example</button>

JS:

$('.example').popover({
   title: function() {
      return 'Popup title' +
             '<button class="close">&times</button>';
   },
   content: 'Popup content',
   trigger: 'hover',
   html: true
});

$('.popover button.close').click(function() {
   $(this).popover('toggle');
});
3
mistermat

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 ermöglicht Popovers und fügt eine Schaltfläche zum Schließen für alle Popovers hinzu, die durch den Tag 'rel = "popover"' identifiziert werden, wobei ein generischer Block von JS-Code verwendet wird. Abgesehen von der (Standard-) Anforderung, dass es sich um ein rel = "popover" -Tag handelt, können Sie eine beliebige Anzahl von popovers auf der Seite platzieren, und Sie müssen ihre IDs nicht kennen. Sie benötigen keine IDs überhaupt. Sie müssen das HTML-Tag-Format "data-title" verwenden, um das title-Attribut Ihrer Popovers festzulegen, und data-html muss auf "true" gesetzt sein.

Der Trick, den ich für notwendig hielt, bestand darin, eine indizierte Map mit Verweisen auf die Popover-Objekte ("po_map") zu erstellen. Dann kann ich über HTML einen Onclick-Handler hinzufügen, der auf das Popover-Objekt über den Index verweist, den JQuery mir dafür gibt ("p_list ['+ index +']. Popover (\ 'toggle \')"). Auf diese Weise muss ich mich nicht um die IDs der Popover-Objekte kümmern, da ich eine Zuordnung von 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\')">&times;</button>');
    po.popover({});
  });
}
$(document).ready(function() { enablePopovers() });

mit dieser Lösung kann ich problemlos alle Popovers auf meiner Site schließen.

1
Chris Tennant
$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')'
1
Desmond Lua
$(function(){ 
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">&times;</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>
1
mii
    $('.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" ">&times;</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-Fenster anzeigen, können Sie als Nächstes das Ereignis shown.bs.popover aufrufen, in dem Sie element erhalten, in dem der Trigger angeklickt wird, um den Popover zu schließen.

1
matiii

Hier ist eine "Cheat" -Lösung:

Befolgen Sie die üblichen Anweisungen für ein abzulehendes Popup.

Dann klick ein 'X' in die Box mit CSS.

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 abzulehnen, wenn jemand etwas anderes als das "X" anklickt, aber das ist in meinem Szenario zumindest kein Problem.

1
Michael Akerman

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">&times;</span>';
  }
}).on('shown.bs.popover', function(e){
  var popover = $(this);
  $(this).parent().find('div.popover .close').on('click', function(e){
    popover.popover('hide');
  });
});
1
user1519240

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');
                        }
      );
  }
});
0
lontongcorp

Setzen Sie dies in Ihren Titel-Popover-Konstruktor ...

'<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 rechten oberen Ecke zu erhalten

//$('[data-toggle=popover]').popover({title:that string here})
0
housecarl

Als sehr einfache Lösung dazu 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) Setzen Sie data-trigger="manual" für das Popover-Auslöserelement 

3) 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 an einer beliebigen Stelle im Popover ein Klick möglich ist. Durch die Fokussierung auf das Kreuz werden Sie das gewünschte Verhalten fördern.

0
Ukuser32

Für mich ist dies die einfachste Lösung, um einem Popover einen Schließen-Button 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');
            }
    });
0

Für jeden, der noch etwas verwirrt ist:

So können Sie den Popover umschalten, nachdem Sie ihn zur Anzeige gebracht haben. Wählen Sie dieselbe Schaltfläche aus, mit der Sie ihn ausgelöst haben, und rufen Sie .popover ("toggle") auf. 

In diesem Fall würde der Code zum Schließen des Popovers folgendermaßen lauten:

$ ('# example'). popover ('toggle');

0
devoragz