Cómo insertar el botón de cerrar en popover para bootstrap

JS:

$(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : 'title ', content : 'test' }) $('html').click(function() { $('#close').popover('hide'); }); }); 

HTML:

  

Estoy escribiendo que tu código no muestra tu ventana emergente.

¿Alguien se encuentra con este problema?

Necesita hacer el marcado correcto

  

Entonces, una forma es adjuntar el controlador de acceso dentro del elemento en sí, lo siguiente funciona:

 $(document).ready(function() { $("#example").popover({ placement: 'bottom', html: 'true', title : 'title'+ '', content : 'test' }); }); 

Necesitaba encontrar algo que funcionara para múltiples popovers y en Bootstrap 3.

Esto es lo que hice:

Tenía varios elementos para los que quería que funcionara un popover, por lo que no quería usar identificadores.

El marcado podría ser:

    

El contenido de los botones guardar y cerrar dentro del popover:

 var contentHtml = [ '
', '', '', '
'].join('\n');

y el javascript para los 3 botones:

Este método funciona cuando el contenedor está predeterminado y no está unido al cuerpo.

 $('.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'); }); }); 

Cuando el contenedor está unido a ‘cuerpo’

Luego, use el aria descrito para encontrar el elemento emergente y ocultarlo.

 $('.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'); }); }); 

Encontré que otras respuestas no eran suficientemente genéricas o demasiado complicadas. Aquí hay uno simple que siempre debería funcionar (para 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'); }); }); }); 

A continuación, solo agregue el atributo data-dismiss="popover" en su botón de cierre. También asegúrese de no usar popover('hide') en otro lugar de su código ya que oculta la ventana emergente pero no establece correctamente su estado interno en el código de arranque, lo que causará problemas la próxima vez que use popover('toggle') .

enter image description here

Lo siguiente es lo que acabo de utilizar en mi proyecto. Y espero que pueda ayudarte

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

Los ejemplos anteriores tienen dos inconvenientes principales:

  1. El botón ‘cerrar’ necesita de alguna manera, ser consciente de la ID del elemento referenciado.
  2. La necesidad de agregar el evento ‘shown.bs.popover’, un oyente ‘click’ al botón de cerrar; que tampoco es una buena solución porque, entonces, estarías agregando dicho oyente cada vez que se muestre el ‘popover’.

A continuación hay una solución que no tiene tales inconvenientes.

Por defecto, el elemento ‘popover’ se inserta inmediatamente después del elemento referenciado en el DOM (luego observe que el elemento referenciado y el popover son elementos hermanos inmediatos). Por lo tanto, cuando se hace clic en el botón “cerrar”, simplemente puede buscar su elemento primario “div.popover” más cercano, y luego buscar el elemento hermano inmediatamente anterior de dicho elemento primario.

Simplemente agregue el siguiente código en el controlador ‘onclick’ del ‘botón de cierre:

 $(this).closest('div.popover').popover('hide'); 

Ejemplo:

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

Revisé muchos de los ejemplos de código mencionados y, para mí, el enfoque de Chris funciona a la perfección. He agregado mi código aquí para tener una demostración funcional de él.

Lo probé con Bootstrap 3.3.1 y no lo he probado con una versión anterior. Pero definitivamente no funciona con 2.x porque el evento shown.bs.popover se introdujo con 3.x.

 $(function() { var createPopover = function (item, title) { var $pop = $(item); $pop.popover({ placement: 'right', title: ( title || ' ' ) + ' ×', 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!'); }); 
      

El truco es obtener el Popover actual con .data (‘bs.popover’). 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'); }); }); 

Esto funciona con varios popovers y también agregué un poco de JS extra para manejar los problemas del índice Z que ocurren con superposición de popovers:

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:

 

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; } 

Solo quería actualizar la respuesta. Según Swashata Ghosh, la siguiente es una manera más simple que funcionó para moi:

HTML:

  

JS:

 $('.example').popover({ title: function() { return 'Popup title' + ''; }, content: 'Popup content', trigger: 'hover', html: true }); $('.popover button.close').click(function() { $(this).popover('toggle'); }); 

Prueba esto:

 $(function(){ $("#example") .popover({ title : 'tile', content : 'test' }) .on('shown', function(e){ var popover = $(this).data('popover'), $tip = popover.tip(); var close = $('') .click(function(){ popover.hide(); }); $('.popover-title', $tip).append(close); }); }); 

En lugar de agregar el botón como una cadena de marcado, es mucho más fácil si tiene un botón jQuery envuelto porque entonces puede enlazar mucho más ordenadamente. Esto lamentablemente falta en el código de Bootstrap, pero esta solución funciona para mí, y en realidad podría ampliarse para aplicarla a todos los popovers si así lo desea.

He luchado con este y esta es la forma más simple de hacerlo, 3 líneas de js:

  1. Agregue una cruz en el título del popover
  2. use el js snippet para mostrar el popover y cierre haciendo clic en el encabezado
  3. Usa un poco de CSS para que sea agradable

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; } 
    
 $popover = $el.popover({ html: true placement: 'left' content: 'Do you want to a review? Yes No' 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')' 
 $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : 'title!! ', content : 'test' }) $(document).on('click', '#close', function (evente) { $("#example").popover('hide'); }); $("#close").click(function(event) { $("#example").popover('hide'); }); });  
  $('.tree span').each(function () { var $popOverThis = $(this); $popOverThis.popover({ trigger: 'click', container: 'body', placement: 'right', title: $popOverThis.html() + '', 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"); }); }); }); 

Cuando haces clic en el elemento y muestra tu ventana emergente, a continuación puedes plantear el evento mostrado .bs.popover donde en este obtienes un elemento en el que disparas clic para cerrar tu popover.

FWIW, aquí está la solución genérica que estoy usando. Estoy usando Bootstrap 3, pero creo que el enfoque general también debería funcionar con Bootstrap 2.

La solución habilita popovers y agrega un botón ‘cerrar’ para todos los popovers identificados por la etiqueta ‘rel = “popover”‘ usando un bloque genérico de código JS. Además del requisito (estándar) de que exista una etiqueta rel = “popover”, puede poner un número arbitrario de popovers en la página, y no necesita conocer sus ID, de hecho, no necesitan ID. en absoluto. Necesita utilizar el formato de etiqueta HTML ‘título de datos’ para establecer el atributo de título de sus elementos emergentes y tener data-html establecido en “verdadero”.

El truco que encontré necesario fue construir un mapa indexado de referencias a los objetos popover (“po_map”). Luego puedo agregar un controlador ‘onclick’ a través de HTML que hace referencia al objeto popover a través del índice que JQuery me da para él (“p_list [‘+ index +’]. Popover (\ ‘toggle \’)”). De esta forma, no tengo que preocuparme por los identificadores de los objetos popover, ya que tengo un mapa de referencias a los objetos con un índice único proporcionado por JQuery.

Aquí está el 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")+ ''); po.popover({}); }); } $(document).ready(function() { enablePopovers() }); 

esta solución me permite cerrar fácilmente todos los popovers en todo mi sitio.

Encontré el código a continuación muy útil (tomado de https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/ ):

 $('[data-toggle="popover"]').popover({ title: function(){ return $(this).data('title')+'×'; } }).on('shown.bs.popover', function(e){ var popover = $(this); $(this).parent().find('div.popover .close').on('click', function(e){ popover.popover('hide'); }); }); 

Sticky on hover, HTML:

 ... 

Javascript:

 $('[data-toggle=popover]').hover(function(e) { if( !$(".popover").is(':visible') ) { var el = this; $(el).popover('show'); $(".popover > h3").append('') .find('.close').on('click', function(e) { e.preventDefault(); $(el).popover('hide'); } ); } }); 

Pon esto en tu constructor popover título …

 'some text' 

… para obtener un pequeño botón rojo “x” en la esquina superior derecha

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

Para cualquiera que todavía esté un poco confundido:

Aquí es cómo funciona para alternar el popover después de que lo hayas mostrado, selecciona el mismo botón que usaste para activarlo y llama a .popover (‘alternar’) sobre él.

En este caso, para cerrar el popover, el código sería:

$ (‘# example’). popover (‘toggle’);

Como una solución muy simple para esto, hice lo siguiente:

1) Agregue el siguiente CSS:

 .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) Establecer data-trigger="manual" en el elemento disparador popover

3) Luego basado en https://github.com/twbs/bootstrap/issues/16802 :

 $('[data-trigger="manual"]').click(function() { $(this).popover('toggle'); }).blur(function() { $(this).popover('hide'); }); 

Esto utiliza la base de que se puede hacer clic en cualquier parte del popover, pero al enfocarse en la cruz alentarás el comportamiento que buscas.

Aquí hay una solución “trampa”:

Siga las instrucciones habituales para una ventana emergente descartable.

Luego, coloca una ‘X’ en el cuadro con CSS.

CSS:

 .popover-header::after { content: "X"; position: absolute; top: 1ex; right: 1ex; } 

JQUERY:

 $('.popover-dismiss').popover({ trigger: 'focus' }); 

HTML:

 ? 

Técnicamente hablando eso lo hace descartable si alguien hace clic en algo que no sea la “X”, pero eso no es un problema en mi caso, al menos.