Popper.js: cómo cerrar la ventana emergente al hacer clic fuera

Presta atención ya que en este post vas a encontrar el arreglo que buscas.Este escrito fue analizado por nuestros especialistas para garantizar la calidad y exactitud de nuestro contenido.

Solución:

Puede lograr esto eliminando la delegación de eventos y verificando el objetivo en el clic del evento usando .is() , (compare e.target si es igual a la referencia btn; de lo contrario, oculte la ventana emergente)

ver violín

Fragmento agregado como su código:

también hizo cambios en el Popper instancia en la que debe pasar el clic actual js-share-cf-btn entonces el $(e.target) elemento

$(function() 
  var reference = $('.js-share-cf-btn');
  var popover = $('.js-share-cf-popover');
  popover.hide();

  $(document).on('click touchend', function(e) 
    var target = $(e.target);
    // ne need to reshow and recreate poper when click over popup so return;
    if(target.is(popover)) return;
    if (target.is(reference)) 
      e.preventDefault();

      popover.show();

      var popper = new Popper(target, popover, 
        placement: 'top',
      );
    else 
      popover.hide();
    
  );

);

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


.section 
  background: #fff;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  margin-bottom: 20px;


.share-popover 
  background: red;
  color: white;
  padding: 10px;

  
Section 1





  This is the trigger



  
Section 2
  This is the trigger



  
Section 3
  This is the trigger



  This is the popup

Algo como esto debería funcionar (al verificar el objetivo cuando hace clic en algún lugar):

$(function() 
  var ref = $('.js-share-cf-btn');
  var popover = $('.js-share-cf-popover');
  popover.hide();

  $(document).on('click', function(e) );

);

https://jsfiddle.net/e8aL9tje/

Recuerda que puedes recomendar este enunciado si te fue útil.

---

---

Utiliza Nuestro Buscador