jquery - popovers - Cómo insertar el botón de cerrar en popover para bootstrap
popovers bootstrap 4 (22)
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>
Estoy escribiendo que tu código no muestra tu ventana emergente.
¿Alguien se encuentra con este problema?
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:
<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>
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.
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.
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'');
});
});
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'')+''<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'');
});
});
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'') .
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:
<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;
}
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")+
''<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map[''+index+''].popover(/'toggle/')">×</button>'');
po.popover({});
});
}
$(document).ready(function() { enablePopovers() });
esta solución me permite cerrar fácilmente todos los popovers en todo mi sitio.
He luchado con este y esta es la forma más simple de hacerlo, 3 líneas de js:
- Agregue una cruz en el título del popover
- use el js snippet para mostrar el popover y cierre haciendo clic en el encabezado
- Usa un poco de CSS para que sea agradable
$(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>
Necesita hacer el marcado correcto
<button type="button" id="example" class="btn btn-primary">example</button>
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 : ''<span class="text-info"><strong>title</strong></span>''+
''<button type="button" id="close" class="close" onclick="$("#example").popover("hide");">×</button>'',
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:
<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>
El contenido de los botones guardar y cerrar dentro del popover:
var contentHtml = [
''<div>'',
''<button class="btn btn-link cancel">Cancel</button>'',
''<button class="btn btn-primary save">Save</button>'',
''</div>''].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'');
});
});
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'');
Pon esto en tu constructor popover título ...
''<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text''
... para obtener un pequeño botón rojo "x" en la esquina superior derecha
//$(''[data-toggle=popover]'').popover({title:that string here})
Prueba esto:
$(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);
});
});
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.
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 || '' '' ) + '' <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>
Solo quería actualizar la respuesta. Según Swashata Ghosh, la siguiente es una manera más simple que funcionó para moi:
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'');
});
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'');
}
);
}
});
Los ejemplos anteriores tienen dos inconvenientes principales:
- El botón ''cerrar'' necesita de alguna manera, ser consciente de la ID del elemento referenciado.
- 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 = ''<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''
});
Lo siguiente es lo que acabo de utilizar en mi proyecto. Y espero que pueda ayudarte
<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'');
}
});
$(''.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");
});
});
});
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.
$(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>
$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'')''
<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>