web-dev-qa-db-ja.com

Popper.js：外部をクリックしたときにポップアップを閉じる方法

私は Popper.js を使用して、クラス.js-share-cf-popoverを持つ要素をクリックしたときに、クラス.js-share-cf-btnを持つポップアップ要素を表示しています。

ただし、ポップアップの外側をクリックした場合にのみポップアップを閉じます。ここにポップアップを表示する実際のコード：

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

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

  popover.show();

  var popper = new Popper(reference, popover, {
    placement: 'top',
  });
});

ここで何か を見つけました が、うまくいきません

ここでMy jsfiddle

javascriptjquerytooltippopper.js
12
Fred K

これを実現するには、イベント委任を削除し、 。is（） を使用してイベントクリック時にターゲットを確認します（参照btnと等しい場合はe.targetを、そうでない場合はポップアップを非表示にします）

fiddle を参照してください

コードとしてスニペットを追加しました：

また、Popperインデックスに変更を加え、現在のクリック_js-share-cf-btn_を渡す必要があります。したがって、$(e.target)要素

_$(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;
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="section">
  <p>Section 1</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="section">
  <p>Section 2</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="section">
  <p>Section 3</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="share-popover js-share-cf-popover">
  This is the popup
</div>_
6
Springer F

このような何かがトリックを実行するはずです（どこかをクリックしたときにターゲットをチェックすることで）：

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

  $(document).on('click', function(e) {
    var target = $(e.target);
    if (target.is(ref) || target.is(popover) ) {
      e.preventDefault();
      popover.show();
      var popper = new Popper(ref, popover, {
        placement: 'right',
      });
    }else {
      popover.hide();
    }
  });

});

https://jsfiddle.net/e8aL9tje/

3
Quentin Roger

Reactを使用している人のために、外部をクリックしたときに閉じるために任意のコンポーネントにアタッチできるHOCの要点を作成しました。

https://Gist.github.com/elie222/850bc4adede99650508aba2090cd5da1

0
Eliezer Steinbock