मैं 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',
  });
});

मुझे कुछ यहां मिला, लेकिन मैं इसे काम नहीं कर सकता

यहाँ मेरा jsfiddle

17
Fred K 4 अप्रैल 2018, 12:27

3 जवाब

सबसे बढ़िया उत्तर

आप ईवेंट प्रतिनिधिमंडल को हटाकर और .is() , (e.target की तुलना करें यदि यह संदर्भ btn के बराबर है अन्यथा पॉपअप छुपाएं)

देखें 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>
8
Spring 12 अप्रैल 2018, 14:37

रिएक्ट का उपयोग करने वालों के लिए, मैंने एक एचओसी का एक सार बनाया है जिसे आप बाहर क्लिक करने पर इसे बंद करने के लिए किसी भी घटक से जोड़ सकते हैं:

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

1
Eliezer Steinbock 24 जिंदा 2019, 20:44

कुछ इस तरह की चाल चलनी चाहिए (जब आप कहीं क्लिक कर रहे हों तो लक्ष्य की जाँच करके):

$(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 4 अप्रैल 2018, 10:02