¿Cómo descartar un popover de Bootstrap de Twitter haciendo clic afuera?

289

¿Podemos hacer que los popovers sean descartables de la misma manera que los modales, es decir. ¿cerrarlos cuando el usuario hace clic en algún lugar fuera de ellos?

Desafortunadamente, no puedo usar modal real en lugar de popover, porque modal significa posición: fijo y eso ya no sería popover. :(

Ante Vrli
fuente
3
Pregunta similar: stackoverflow.com/q/8947749/1478467
Sherbrow
Pruebe este stackoverflow.com/a/40661543/5823517 . No implica pasar por los padres
Tunn
data-trigger="hover"y data-trigger="focus"son una alternativa incorporada para cerrar el popover, si no desea usar alternar. En mi opinión, data-trigger="hover"proporciona la mejor experiencia de usuario ... no hay necesidad de escribir código .js extra ...
Hooman Bahreini

Respuestas:

461

Actualización: una solución un poco más robusta: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Para botones que solo contienen texto:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

Para los botones que contienen iconos, use (este código tiene un error en Bootstrap 3.3.6, consulte la solución a continuación en esta respuesta)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

Para popovers generados por JS Uso '[data-original-title]'en lugar de'[data-toggle="popover"]'

Advertencia: La solución anterior permite que se abran múltiples popovers a la vez.

Un popover a la vez, por favor:

Actualización: Bootstrap 3.0.x, ver código o violín http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Esto maneja el cierre de popovers ya abiertos y sin hacer clic o sus enlaces no se han hecho clic.


Actualización: Bootstrap 3.3.6, ver violín

Soluciona el problema donde, después del cierre, toma 2 clics para volver a abrir

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Actualización: Utilizando el condicional de la mejora anterior, se logró esta solución. Solucione el problema de doble clic y popover fantasma:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});
mattdlockyer
fuente
2
Adjunto a en $(document)lugar de $('body')ya que a veces bodyno se extiende por toda la página.
jasop
66
Después de activar el popover (y la posterior acción de ocultar), el popover no está completamente oculto; Simplemente no es visible. El problema es que no se puede hacer clic ni desplazar el contenido debajo del popover invisible pero presente. El problema se produce en la última compilación de Chrome, la última versión de bootstrap 3 .js (también podrían ser otros navegadores, no se pudo molestar en verificar ya que esta solución debería ser requerida de todos modos)
ravb79
66
En lugar de '[data-toggle="popover"]', que no funciona con popovers generados por JavaScript, utilicé '[data-original-title]'como selector.
Nathan
44
¿Alguien sabe por qué esta solución no funciona con la última versión de bootstrap? Lo siguiente está sucediendo: haga clic en el botón para mostrar popover, luego haga clic en el cuerpo para descartar popover, luego haga clic en el botón para mostrar popover y popover no se muestra. Después de que falla una vez, si vuelve a hacer clic, se muestra. Es muy extraño.
JTunney
3
@JTunney Estoy ejecutando BS 3.3.6 y todavía veo ese comportamiento donde se requieren dos clics para abrir un popoever después de descartar uno.
sersun
65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Esto cierra todos los elementos emergentes si hace clic en cualquier lugar excepto en un elemento emergente

ACTUALIZACIÓN para Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});
usuario28490
fuente
Agregué una clase al botón que activa el popover (pop-btn) para que no esté incluido ... if (! $ (E.target) .closest ('. Popover'). Length &&! $ (E. target) .closest ('. btn'). hasClass ('pop-btn'))
mozgras
2
Con 3 botones emergentes, este código crea problemas. En algunos casos no puedo hacer clic en el botón y los botones se muestran.
OpenCode
1
No puedo hacer que este código funcione ... verifique este violín y agregue un violín a su respuesta. jsfiddle.net/C5GBU/102
mattdlockyer
Perfecto para mi. Otras respuestas tuvieron efectos secundarios cuando mi "clic externo" abrió un nuevo popover.
Facio Ratio
Esto funciona muy bien, pero necesita tener una forma de adaptar esto para que si hace clic en el contenido del popover, no se cierre. por ejemplo, si hace clic en el texto dentro de una etiqueta <b> dentro del popover ...
Ben en CA
40

La versión más simple, más segura , funciona con cualquier versión de arranque.

Demostración: http://jsfiddle.net/guya/24mmM/

Demostración 2: no descartar al hacer clic dentro del contenido emergente http://jsfiddle.net/guya/fjZja/

Demostración 3: Popovers múltiples: http://jsfiddle.net/guya/6YCjW/


Simplemente llamando a esta línea descartará todos los popovers:

$('[data-original-title]').popover('hide');

Descarta todos los popovers al hacer clic afuera con este código:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

El fragmento de arriba adjunta un evento de clic en el cuerpo. Cuando el usuario hace clic en un popover, se comportará de manera normal. Cuando el usuario hace clic en algo que no es un popover, cerrará todos los popovers.

También funcionará con popovers que se inician con Javascript, a diferencia de otros ejemplos que no funcionarán. (ver la demostración)

Si no desea descartar al hacer clic dentro del contenido emergente, use este código (vea el enlace a la segunda demostración):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});
guya
fuente
3
Tuve un problema similar y esto funcionó en Bootstrap 3.
wsams
Si acerca los popovers de tal manera que los popovers se superpongan, cuando oculta un popover haciendo clic en algún lugar fuera, uno de los enlaces deja de funcionar. Compruebe: jsfiddle.net/qjcuyksb/1
Sandeep Giri
1
La última versión no funciona cuando se utiliza bootstrap-datepicker en el popover.
dbinott
1
Me gustó más esta solución, porque la respuesta aceptada comenzó a ser un poco acaparadora de recursos con aproximadamente 30 ventanas emergentes
David G el
1
Quizás !$(e.target).closest('.popover.in').lengthsería más eficiente que !$(e.target).parents().is('.popover.in').
joeytwiddle
19

Con Bootstrap 2.3.2 puede configurar el disparador para 'enfocar' y simplemente funciona:

$('#el').popover({trigger:'focus'});
periklis
fuente
1
+1, pero nota al margen importante: esto no cierra el popover, si vuelve a hacer clic en el botón o el ancla, mientras que la respuesta aceptada sí.
Christian Gollhardt
18

Básicamente, esto no es muy complejo, pero hay que hacer algunas comprobaciones para evitar problemas técnicos.

Demostración (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});
Sherbrow
fuente
2
esto descarta el modal haciendo clic en todas partes, no fuera
hienbt88
¿Es posible hacer esto con un popover()clic en lugar de pasar el mouse por encima?
Zaki Aziz el
3
Por supuesto, pero debe llamar stopPropagation()al evento pasado al controlador de clics (si no, el controlador de ocultación oculta inmediatamente el popover). Demostración (jsfiddle)
Sherbrow
Tengo la misma funcionalidad a continuación en mucho menos código. Esta respuesta es hinchada y un poco ridícula para la pregunta ... Todo lo que quiere es cerrar los popovers cuando haces clic afuera ... ¡Esto es excesivo y feo!
mattdlockyer
2
Corrección, creo que tengo MEJOR funcionalidad en MUCHO menos código. Se supone que solo desea que se muestre una ventana emergente a la vez. Si te gusta esto, por favor vota mi respuesta a continuación: jsfiddle.net/P3qRK/1 respuesta: stackoverflow.com/a/14857326/1060487
mattdlockyer
16

Ninguna de las supuestas soluciones de alta votación me funcionó correctamente. Cada uno conduce a un error cuando, después de abrir y cerrar (haciendo clic en otros elementos) el popover por primera vez, no se abre de nuevo, hasta que haga dos clics en el enlace de activación en lugar de uno.

Así que lo modifiqué un poco:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})
Anton Sergeyev
fuente
1
Bien, está funcionando para mí. Por cierto, olvidaste a); al final de su código después de la última}
Merlin
1
Tenía el mismo problema relacionado con el segundo clic. ¡Esta debería ser la respuesta a prueba de fallos!
Felipe Leão
También probé las soluciones anteriores anteriores, pero como una guía para aquellos que también están buscando una solución a partir de 2016, esta es una mejor solución.
dariru
respuesta superior, funciona como se anuncia. Como se señaló, otros no. esta debería ser la respuesta principal
duggi
Funciona perfectamente, excepto que no utilicé data-toggel = "popover". Pero puede especificar cualquier selector que coincida con sus elementos de activación de popover. Buena solución y la única que resolvió el problema de los dos clics para mí.
shock_gone_wild
11

Hice un jsfiddle para mostrarle cómo hacerlo:

http://jsfiddle.net/3yHTH/

La idea es mostrar el popover cuando hace clic en el botón y ocultar el popover cuando hace clic fuera del botón.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});
Pigueiras
fuente
Buena demo. Me pregunto cómo podría llamar popover en el objeto Jquery, popover es un complemento bootstrap js, pero ¿no incluye ningún archivo bootstrap js allí?
bingjie2680
Hay un archivo js en el jsfiddle. Mire la columna izquierda -> Administrar recursos.
Pigueiras
Ok, veo que hay un bootstrap js. pero no está marcado, ¿aún funciona?
bingjie2680
Si, funciona. De todos modos, busqué en google: jsfiddle bootstrapy me dio el esqueleto de bootstrap css + js en jsfiddle.
Pigueiras
2
Mi único problema con esto es que ocultas el popover cuando haces clic en él. También podría usar una información sobre herramientas.
NoBrainer 01 de
7

simplemente agregue este atributo con el elemento

data-trigger="focus"
siraj k
fuente
Inicialmente, esto no funcionó para mí con Bootstrap 3.3.7, pero luego leí los documentos y tienen una guía que vale la pena mencionar aquí. Del ejemplo de Popover Descartable en los documentos "Para un comportamiento adecuado entre navegadores y plataformas, debe usar la etiqueta <a>, no la etiqueta <button>, y también debe incluir los atributos role =" button "y tabindex ".
Jeff
3

Esto se ha preguntado antes aquí . La misma respuesta que di entonces aún se aplica:

Tenía una necesidad similar, y encontré esta pequeña gran extensión del Twitter Bootstrap Popover de Lee Carmichael, llamada BootstrapX - clickover . Él también tiene algunos ejemplos de uso aquí . Básicamente, cambiará el popover a un componente interactivo que se cerrará cuando haga clic en otra parte de la página, o en un botón de cierre dentro del popover. Esto también permitirá múltiples popovers abiertos a la vez y un montón de otras características interesantes.

Miika L.
fuente
3

Esto es tarde para la fiesta ... pero pensé en compartirlo. Me encanta el popover pero tiene muy poca funcionalidad incorporada. Escribí una extensión de arranque .bubble () que es todo lo que me gustaría que fuera Popover. Cuatro formas de despedir. Haga clic afuera, active el enlace, haga clic en la X y presione escapar.

Se posiciona automáticamente para que nunca se salga de la página.

https://github.com/Itumac/bootstrap-bubble

Esta no es una autopromoción gratuita ... He tomado el código de otras personas tantas veces en mi vida que quería ofrecer mis propios esfuerzos. Dale una vuelta y mira si te funciona.

Itumac
fuente
3

De acuerdo con http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Use el desencadenador de foco para descartar popovers en el siguiente clic que haga el usuario.

$('.popover-dismiss').popover({
    trigger: 'focus'
})
effe
fuente
2
No funciona en los navegadores Mac que siguen el comportamiento nativo de OS X (que no enfoca ni desenfoca los botones al hacer clic). Estos incluyen Firefox y Safari. Los chicos de Bootstrap cometieron un gran error aquí, ya que estos popovers ni siquiera se pueden abrir, y mucho menos descartar.
Ante Vrli
2
@AnteVrli Tal vez esto aún no estaba en la documentación cuando escribió su comentario, pero ahora los documentos dicen: "Para un comportamiento adecuado entre navegadores y plataformas, debe usar la <a>etiqueta, no la <button>etiqueta, y también debe incluir el role="button"y tabindexatributos ". ¿Lo probaste con estas especificaciones?
Louis
3
Bueno, no es un problema con esta respuesta, que no tiene nada que ver con la compatibilidad de la plataforma: al pulsar un botón del ratón dentro de un popover despedirá el popover porque el elemento que desencadena la popover perderá el foco. Olvídese de que los usuarios puedan copiar y pegar desde popovers: tan pronto como el botón del mouse esté presionado, el popover se cierra. Si tiene elementos accionables en la ventana emergente (botones, enlaces), los usuarios no podrán usarlos.
Louis
Demasiado para 'multiplataforma' porque en Bootstrap 4.0.0-beta y 4.0.0-beta.2 no puedo hacer que esto funcione en Mac en Chrome :(
rmcsharry
3

Solución aceptada modificada. Lo que he experimentado es que después de ocultar algunos popovers, tendrían que hacer clic dos veces para volver a aparecer. Esto es lo que hice para asegurarme de que no se llamara a popover ('hide') en popovers ya ocultos.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});
Chisom Daniel Mba
fuente
3

Esta solución funciona bien:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});
LN
fuente
2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
hienbt88
fuente
2

También puede usar el burbujeo de eventos para eliminar la ventana emergente del DOM. Está un poco sucio, pero funciona bien.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

En su HTML, agregue la clase .popover-close al contenido dentro del popover que debería cerrar el popover.

Hendrik
fuente
2

Parece que el método 'ocultar' no funciona si crea el popover con delegación de selector, en su lugar, debe usarse 'destruir'.

Lo hice funcionar así:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

JSfiddle aquí

Vladimir Dimchev
fuente
2

Descubrimos que teníamos un problema con la solución de @mattdlockyer (¡gracias por la solución!). Al usar la propiedad de selector para el constructor de popover como este ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... la solución propuesta para BS3 no funcionará. En su lugar, crea una segunda instancia de popover local a su $(this). Aquí está nuestra solución para evitar eso:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Como se mencionó $(this).popover('hide');, creará una segunda instancia debido al oyente delegado. La solución proporcionada solo oculta popovers que ya están instanciados.

Espero poder ahorrarles algo de tiempo.

núcleo
fuente
2

Bootstrap lo admite de forma nativa :

JS Bin Demo

Marcado específico requerido para descartar en el siguiente clic

Para un comportamiento adecuado entre navegadores y plataformas, debe usar la <a>etiqueta, no la <button>etiqueta, y también debe incluir los atributos role="button"y tabindex.

Tanner Perrien
fuente
En bootstrap 4.0.0-beta y 4.0.0-beta.2 no puedo hacer que esto funcione en Mac en Chrome :(
rmcsharry
Al hacer clic en cualquier lugar se cierra este popover, el interlocutor requiere "hacer clic fuera del popover lo cierra", que es diferente.
philw
2

esta solución elimina el molesto segundo clic al mostrar el popover por segunda vez

probado con Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});
Nik
fuente
2

He intentado muchas de las respuestas anteriores, realmente nada funciona para mí, pero esta solución lo hizo:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Recomiendan usar la etiqueta de anclaje, no el botón y cuidar los atributos role = "button" + data-trigger = "focus" + tabindex = "0".

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>
Ahmed El Damasy
fuente
pruebe esta referencia también: stackoverflow.com/questions/20466903/…
Ahmed El Damasy
1

Se me ocurrió esto: mi escenario incluía más popovers en la misma página, y ocultarlos los hacía invisibles y, por eso, no fue posible hacer clic en los elementos detrás del popover. La idea es marcar el enlace de popover específico como 'activo' y luego simplemente puede 'alternar' el popover activo. Hacerlo cerrará el popover completamente $ ('. Popover-link'). Popover ({html: true, container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"
Adi Nistor
fuente
1

Simplemente elimino otros popovers activos antes de que se muestre el nuevo popover (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              
andrearonsen
fuente
1

probado con 3.3.6 y el segundo clic está bien

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

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });
Sungwook Ji
fuente
0

demostración: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

Esta es mi solución para ello.

Oğuzhan Topçu
fuente
0

Este enfoque garantiza que pueda cerrar una ventana emergente haciendo clic en cualquier lugar de la página. Si hace clic en otra entidad en la que se puede hacer clic, oculta todos los demás elementos emergentes. La animación: se requiere falso; de lo contrario, obtendrá un error jquery .remove en su consola.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')
Arijit Lahiri
fuente
0

Ok, este es mi primer intento de responder algo en stackoverflow, así que aquí no pasa nada: P

Parece que no está del todo claro que esta funcionalidad realmente funcione de forma inmediata en el último arranque (bueno, si estás dispuesto a comprometer dónde puede hacer clic el usuario. No estoy seguro de si tienes que poner 'clic' pase el mouse 'per-se pero en un iPad, el clic funciona como una palanca.

El resultado final es que en un escritorio puede desplazarse o hacer clic (la mayoría de los usuarios se desplazarán). En un dispositivo táctil, tocar el elemento lo abrirá y tocarlo nuevamente lo derribará. Por supuesto, este es un pequeño compromiso de su requisito original, pero al menos su código ahora está más limpio :)

$ (". my-popover"). popover ({trigger: 'click hover'});

Ivan Portugal
fuente
0

Tomando el código de Matt Lockyer, hice un reinicio simple para que el elemento dom no se cubra en hide.

Código de Matt: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Violín: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});
usuario14174
fuente
0

Prueba esto, esto se ocultará haciendo clic afuera.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});
Rakesh Vadnal
fuente
0

Estaba teniendo problemas con la solución de mattdlockyer porque estaba configurando enlaces popover dinámicamente usando un código como este:

$('body').popover({
        selector : '[rel="popover"]'
});

Así que tuve que modificarlo así. Me solucionó muchos problemas:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

Recuerde que destruir elimina el elemento, por lo que la parte del selector es importante para inicializar los popovers.

bryanjj
fuente