Como ya sabes, por defecto los popovers de Boostrap se cierran al pulsar nuevamente sobre el elemento que los activa, a no ser, obviamente, que añadamos el atributo data-trigger=»focus» dentro de dicho elemento, en cuyo caso se cerrarán al pusar en cualquier parte del área de visualización de la ventana del navegador.
Sin embargo, si no quieres añadir este atributo puedes insertar un botón de cierre dentro de un popover. En este post te muestro como hacerlo.
Primero creamos un botón, que será el elemento que activará nuestro popover:
<div class="mt-2 ml-3">
<h1>Insertar un botón de cierre en un popover </h1>
<button type="button" class="btn btn-lg btn-success mt-3" data-toggle="popover">Pulsar aquí</button>
</div>
Fíjate que hemos agregado el atributo data-toggle=popover.
Lo siguiente será habilitar nuestro popover mediante JavaScript.
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'bottom',
html : true,
title : 'Título del popover <a href="#" class="close" data-dismiss="alert">×</a>',
content : '<div class="media"><div class="media-body"><p>Este es un ejemplo de popover con botón de cierre.</p></div></div>'
});
El atributo placement: bottom posiciona el popover en la parte inferior del botón.
Con el atributo title definimos el título del popover, pero también insertamos el botón de cierre.
El atributo html con el valor true permite insertar contenido HTML dentro del popover. Este contenido lo escribimos como valor del atributo content.
Por último, vamos a utilizar el método .popover(‘hide’) para ocultar nuestro popover cuando pulsemos sobre el botón de cierre.
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
Con esto ya tenemos listo nuestro popover con botón de cierre. Aquí puedes ver el código completo:
See the Pen Cómo insertar un botón de cierre en un popover de Boostrap by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024