मैं पेज पर कहीं से भी (और) एक क्लिक से ट्विटर बूटस्ट्रैप पॉपओवर कैसे बंद कर सकता हूं?

Question

मैं वर्तमान में ट्विटर बूटस्ट्रैप के साथ पॉपओवर का उपयोग कर रहा हूं, इस तरह से शुरू किया गया:

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

जैसा कि आप देख सकते हैं, वे मैन्युअल रूप से ट्रिगर हो गए हैं, और एक पॉपओवर को टॉगल करता है। यह बहुत अच्छा काम करता है, लेकिन मैं पेज पर कहीं भी एक क्लिक के साथ पॉपओवर को बंद करने में सक्षम होना चाहूंगा (लेकिन पॉपओवर पर ही नहीं!)।

मैंने निम्नलिखित सहित कुछ अलग चीजों की कोशिश की है, लेकिन इसके लिए कोई परिणाम नहीं दिखा:

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

मैं पेज पर कहीं भी एक क्लिक के साथ पॉपओवर को कैसे बंद कर सकता हूं, लेकिन एक क्लिक के साथ ही पॉपओवर को नहीं?

Comments

हम्म, मुझे लगता है कि यह काम करेगा ... क्या आपके पास मौका द्वारा इस ऑनलाइन के लिए लिंक है?

— तत्कालीन

Answer 1

यह मानते हुए कि किसी भी समय केवल एक पॉपओवर दिखाई दे सकता है, आप झंडे के एक सेट का उपयोग करके चिह्नित कर सकते हैं जब एक पॉपओवर दिखाई देता है, और उसके बाद ही उन्हें छिपाएं।

यदि आप ईवेंट श्रोता को दस्तावेज़ निकाय पर सेट करते हैं, तो 'पॉपअप-मार्कर' के साथ चिह्नित तत्व पर क्लिक करने पर यह ट्रिगर हो जाएगा। इसलिए आपको stopPropagation()ईवेंट ऑब्जेक्ट पर कॉल करना होगा। और पॉपकॉर्न पर क्लिक करते समय एक ही चाल लागू करें।

नीचे एक कार्यशील जावास्क्रिप्ट कोड है जो ऐसा करता है। यह jQuery> = 1.7 का उपयोग करता है

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

        $(this).popover('show');

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

एकमात्र चेतावनी यह है कि आप एक ही समय में 2 पॉपओवर नहीं खोल पाएंगे। लेकिन मुझे लगता है कि वैसे भी उपयोगकर्ता के लिए भ्रामक होगा :-)

Comments

उस jsfiddle में ही पॉपओवर पर क्लिक करने से पॉपओवर छिप जाता है - जो काफी tnorthcutt ने पूछा है।

— जोनाथन हिल

@RaduCugut एक महान समाधान है। लेकिन इसका एक बग है। एक बार zzzzz पर क्लिक करें और पॉप अप दिखाता है। अब एक बार व्हाइट बैकग्राउंड पर क्लिक करें। पॉपअप गायब हो जाता है। अब फिर से सफेद बैकग्राउंड पर क्लिक करें। और अब zzzz पर फिर से क्लिक करें और यह काम नहीं करता है। : - |

— होउमैन

@ क्या आप सही हैं, मैंने इसे ठीक करने के लिए फिडेल और उत्तर को संशोधित किया है। jsfiddle.net/AFffL/177

— रादु कगुट 14

केवल $ ('पॉपअप-मार्कर') क्यों नहीं चलाया जाता है। पॉपओवर ('छिपाने') (उन सभी को छिपाने के लिए) $ (यह)। पोपओवर ('शो') से पहले, जो किसी भी अदृश्य और क्लिक-वे चर की आवश्यकता को हटा देता है?

— नाथन हैंगन

इस समाधान ने मुझे कुछ मुद्दे दिए (खुले हुए पॉपओवर के '.popup- मार्कर' तत्व पर क्लिक करने से पॉपओवर आगे की तरफ काम नहीं करता)। मैं अभी तक एक और समाधान (नीचे पोस्ट) के साथ आया था जो मेरे लिए काम करता था और सरल लगता है (मैं बूटस्ट्रैप 2.3.1 का उपयोग कर रहा हूं)।

— RayOnAir

Answer 2

यह और भी आसान है:

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

Comments

माना। और कम से कम मेरे लिए, यही सही तरीका है। पहला विकल्प "त्वरित फिक्स" लगता है।

— डेनिस लिन्स

इस का उपयोग करना चाहते हैं, लेकिन किसी कारण से काम नहीं किया। क्लिक करने की घटनाएँ कभी नहीं पहुँचीं htmlक्योंकि e.stopPropagation();इसके बजाय मैंने कुछ ऐसा इस्तेमाल $('.popup-marker').on('show', function(event) { $('.popup-marker').filter(function(index, element) { return element != event.target; }).popover('hide'); });किया जिससे काम भी ठीक हो गया (पता नहीं कि प्रदर्शन में कोई अंतर है या नहीं)

— कॉर्नेलिस

यह सबसे अच्छा जवाब है IMO।

— लूलूई

@Pbaron के @Cornelis उत्तरों का संकलन सबसे अच्छा काम करता है। मैंने जो जोड़ा है वह दूसरे 'क्लिक' फ़ंक्शन के अंदर कॉर्नेलिस कोड है ( $(this).popover('toggle');भाग से ठीक पहले । फिर, यदि आपके पास कई 'पॉपअप-मार्कर' ऑब्जेक्ट हैं, तो प्रत्येक को क्लिक करने से दूसरे बंद हो जाएंगे।

— alekwisnia

इसके साथ एक समस्या यह है कि आबादी अभी भी है, बस छिपी हुई है। उदाहरण के लिए यदि आपके पास पॉपओवर में लिंक हैं, तो आप अपने कर्सर को उस स्थान पर ले जा सकते हैं जहां यह हुआ करता था और अभी भी उन लिंक पर कर्सर को बदल सकते हैं।

— ग्लेशियल

Answer 3

मुझे इसी तरह की आवश्यकता थी, और ली कारमाइकल द्वारा ट्विटर बूटस्ट्रैप पॉपओवर के इस महान छोटे विस्तार को बूटस्ट्रैपएक्स - क्लिकओवर कहा गया । यहां उनके कुछ उपयोग उदाहरण भी हैं । मूल रूप से यह पॉपओवर को एक इंटरेक्टिव घटक में बदल देगा, जो पेज पर कहीं और क्लिक करने पर या पॉपओवर के भीतर एक क्लोज बटन पर बंद हो जाएगा। यह एक ही बार में कई पॉपओवर को खोलने और अन्य अच्छी सुविधाओं का एक गुच्छा बनाने की अनुमति देगा।

प्लगिन यहाँ पाया जा सकता है ।

उदाहरण का उपयोग करें

<button rel="clickover" data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

जावास्क्रिप्ट:

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

Comments

यह वास्तव में बहुत अच्छा है। सुपर आसान है।

— डग

बहुत बढ़िया प्लगइन! लिंक के लिए धन्यवाद।

— मैट विल्सन

बस इसे एक शॉट दिया और यह बहुत अच्छा काम करता है। यह उतना ही आसान था जितना कि मौजूदा पॉपओवर के रिलेशन को "पॉपओवर" से "क्लिकओवर" में बदलना।

— Dmase05

बूटस्ट्रैप v2.3.1 पर चल रहा है, कोई समस्या नहीं है।

— केविन देवल्ट

Answer 4

स्वीकृत समाधान ने मुझे कुछ मुद्दे दिए (खुले हुए पॉपओवर के '.popup- मार्कर' तत्व पर क्लिक करने से पॉपओवर बाद में काम नहीं करते)। मैं इस अन्य समाधान के साथ आया जो मेरे लिए पूरी तरह से काम करता है और यह काफी सरल है (मैं बूटस्ट्रैप 2.3.1 का उपयोग कर रहा हूं)

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

अद्यतन: यह कोड बूटस्ट्रैप 3 के साथ भी काम करता है!

Comments

यह एक बेहतरीन उपाय है। धन्यवाद।

— गैविन

अच्छा समाधान। if (!$(e.target).is('.popup-marker') && !$(e.target).parents('.popover').length > 0)अगर आप html कंटेंट

— रखते हैं

या बेहतरif (!$(e.target).is('.popup-marker') && $(e.target).closest('.popover').length === 0)

— fabdouglas

Answer 5

"अगले क्लिक पर खारिज करें" यहाँ पढ़ें http://getbootstrap.com/javascript/#popovers

आप अगली क्लिक पर पॉपओवर को खारिज करने के लिए फोकस ट्रिगर का उपयोग कर सकते हैं, लेकिन आपको <a>टैग का उपयोग करना होगा , न कि <button>टैग का उपयोग करना होगा, और आपको एक tabindexविशेषता भी शामिल करनी होगी ...

उदाहरण:

<a href="#" tabindex="0" class="btn btn-lg btn-danger"
  data-toggle="popover" data-trigger="focus" title="Dismissible popover"
  data-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover
</a>

Comments

प्रश्न में कहा गया है कि वह नहीं चाहता था कि अगर यह क्लिक पॉपओवर पर हो तो इसे खारिज कर दिया जाए। यह इसे कहीं भी किसी भी क्लिक पर खारिज कर देता है।

— फ्रेड

डेटा-ट्रिगर जोड़ना = "फ़ोकस" ने मेरी आबादी को लॉन्च करने से रोक दिया जब तक कि मैंने इस पोस्ट को नहीं पढ़ा और टैबइंडेक्स विशेषता को जोड़ दिया। अब यह काम कर रहा है!

— PixelGraph

जानकारी के लिए, यह भी साथ काम करता है tooltip, भले ही यह वास्तविक डॉक्टर पर स्पष्ट रूप से उल्लेख नहीं किया गया हो।

— एलेक्सबी

Answer 6

मौजूदा सभी उत्तर काफी कमजोर हैं, क्योंकि वे सभी दस्तावेज़ घटनाओं पर कब्जा करने और फिर सक्रिय पॉपओवर खोजने या कॉल को संशोधित करने पर भरोसा करते हैं .popover()।

show.bs.popoverदस्तावेज़ के शरीर पर घटनाओं को सुनने के लिए एक बेहतर दृष्टिकोण है, फिर उसके अनुसार प्रतिक्रिया करें। नीचे वह कोड है जो दस्तावेज़ को क्लिक करने पर पॉपओवर को बंद कर देगा या escदबाया जाएगा, जब पॉपओवर दिखाए जाते हैं तो केवल घटना श्रोताओं को बांधा जाता है:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

Comments

+1 यह सबसे साफ और सबसे एक्स्टेंसिबल समाधान है। यदि आप बैकबोन जैसे ढांचे का उपयोग कर रहे हैं, तो बस इसे अपने इनिशियलाइज़ेशन कोड में डंप करें और यह पॉपओवर को संभालने का ध्यान रखेगा।

— JohnP

यह उत्तर प्रदर्शन संबंधी चिंताओं को भी जोड़ता है और यह पॉपओवर के भीतर अधिक जटिल HTML को संभालने की अनुमति देता है।

— रिकार्डो

महान समाधान; इसे एक प्रतिक्रिया विधि में काफी आसानी से छोड़ने में सक्षम था। एक सुझाव, $(event.target).data("bs.popover").inState.click = false;onPopoverHide फ़ंक्शन में जोड़ें ताकि आपको समापन के बाद फिर से खोलने के लिए दो बार क्लिक करने की आवश्यकता न हो।

— sco_tt

उत्सुक अगर आप दो पॉपअप के साथ इस का एक बेला बना सकते हैं। मेरे आवेदन में जब मैंने आपका कोड लागू किया था, तो मैं पॉपअप पर क्लिक करने में सक्षम था और कई दिखाई दिए, फिर 'बॉडी' पर क्लिक करके केवल पिछले एक को हटा दिया।

— टेरी

Answer 7

https://github.com/lecar-red/bootstrapx-clickover

यह ट्विटर बूटस्ट्रैप पॉपओवर का विस्तार है और समस्या को बहुत सरलता से हल करेगा।

Answer 8

किसी और कारण से यहाँ किसी अन्य समाधान ने मेरे लिए काम नहीं किया। हालांकि, बहुत समस्या निवारण के बाद, मैं आखिरकार इस पद्धति पर आ गया जो पूरी तरह से काम करता है (मेरे लिए कम से कम)।

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

मेरे मामले में मैं एक टेबल पर एक पॉपओवर जोड़ रहा था और tdउस पर क्लिक करने के ऊपर / नीचे बिल्कुल स्थिति थी। तालिका चयन jQuery-UI चयन द्वारा नियंत्रित किया गया था, इसलिए मुझे यकीन नहीं है कि यदि वह हस्तक्षेप कर रहा था। हालाँकि जब भी मैं पॉपओवर के अंदर क्लिक करता था तो मेरा क्लिक हैंडलर जो $('.popover')कभी काम नहीं करता था और इवेंट हैंडलिंग हमेशा $(html)क्लिक हैंडलर को सौंप दी जाती थी । मैं JS के लिए काफी नया हूँ इसलिए शायद मुझे कुछ याद आ रहा है?

वैसे भी मुझे आशा है कि यह किसी की मदद करता है!

Comments

BTW मुझे यकीन नहीं है कि यह मायने रखता है, लेकिन मैंने बूटस्ट्रैप 2 के लिए इस पद्धति का उपयोग किया है। मुझे लगता है कि यह बूटस्ट्रैप 3 के लिए काम करेगा, लेकिन इसकी पुष्टि नहीं हुई है।

— मोलोजा

Answer 9

मैं अपने सभी पॉपओवर एंकरों को क्लास देता हूं activate_popover। मैं उन सभी को एक बार लोड करने पर सक्रिय करता हूं

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

मैं (कॉफी स्क्रिप्ट में) का उपयोग कर काम कर रहे क्लिक दूर कार्यक्षमता पाने के लिए:

$(document).on('click', (e) ->
  clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
  clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
  $(".popover.in").prev().popover('hide')
if clickedOnActivate 
  $(".popover.in").prev().each () ->
    if !$(this).is($(e.target).closest('.activate-popover'))
      $(this).popover('hide')
)

जो बूटस्ट्रैप 2.3.1 के साथ पूरी तरह से ठीक काम करता है

Comments

इसने मेरे लिए काम किया, सिवाय इसके कि मुझे .prev()पहले ifक्लॉज में छुटकारा पाना था । मैं बूटस्ट्रैप 3.2.0.2 का उपयोग कर रहा हूं, शायद कोई अंतर है? इसके अलावा, ifयदि आप एक ही समय में कई पॉप-अप खोलना चाहते हैं, तो आप पूरे दूसरे खंड को छोड़ सकते हैं । कहीं भी क्लिक करें जो सभी खुले पॉपओवर को बंद करने के लिए एक पॉपओवर-एक्टिवेटिंग-एलिमेंट (क्लास 'सक्रिय-पॉपओवर' इस उदाहरण में) नहीं है। बहुत अच्छा काम करता है!

— एंड्रयू स्विहर्ट

Answer 10

हालांकि यहां बहुत सारे समाधान हैं, मैं चाहूंगा कि मेरा भी प्रस्ताव है, मुझे नहीं पता कि क्या कुछ समाधान है जो इसे हल करता है, लेकिन मैंने उनमें से 3 की कोशिश की और उनके पास मुद्दे थे, जैसे क्लिक करना यह जिस पॉपओवर पर आता है वह इसे छिपा देता है, अन्य अगर मेरे पास एक और पॉपओवर बटन होता है, तो दोनों / कई पॉपओवर पर क्लिक होता है (जैसे चयनित सॉल्यूशन में), कभी भी, यह सब तय हो गया

var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
    var container = $(".popover.in");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if( curr_popover_btn != null )
        {
            $(curr_popover_btn).popover('hide');
            curr_popover_btn = null;
        }
        container.hide();
    }
}
// Hide popovers when out of focus
$('html').click(function(e) {
    hide_popovers(e);
});
$('.popover-marker').popover({
    trigger: 'manual'
}).click(function(e) {
    hide_popovers(e);
    var $popover_btns = $('.popover-marker');
    curr_popover_btn = this;
    var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
                return ( popover_btn !== curr_popover_btn );
            });
    $($other_popover_btns).popover('hide');
    $(this).popover('toggle');
    e.stopPropagation();
});

Answer 11

मैं नए बनाए गए पॉप-ओवर पर ध्यान केंद्रित करूंगा और इसे ब्लर पर हटा दूंगा। इस तरह से यह जांचने की आवश्यकता नहीं है कि DOM के किस तत्व को क्लिक किया गया है और पॉप-ओवर को क्लिक किया जा सकता है, और चयनित भी: यह अपना ध्यान नहीं खोएगा और गायब नहीं होगा।

कोड:

    $('.popup-marker').popover({
       html: true,
       trigger: 'manual'
    }).click(function(e) {
       $(this).popover('toggle');
       // set the focus on the popover itself 
       jQuery(".popover").attr("tabindex",-1).focus();
       e.preventDefault();
    });

    // live event, will delete the popover by clicking any part of the page
    $('body').on('blur','.popover',function(){
       $('.popup-marker').popover('hide');
    });

Answer 12

यहाँ समाधान है जो मेरे लिए बहुत ठीक है, अगर यह मदद कर सकता है:

/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
  if (!compareTo || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
    $('span.btn').popover();
    $('span.btn').unbind("click");
    $('span.btn').bind("click", function(e) {
        e.stopPropagation();
        if($(this).equals(popoverOpened)) return;
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");            
        }
        $(this).popover('show');
        popoverOpened = $(this);
        e.preventDefault();
    });

    $(document).click(function(e) {
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");   
            popoverOpened = null;
        }        
    });
});

Answer 13

यहाँ मेरा समाधान है, इसके लायक क्या है:

// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

  // Loop through each popover on the page
  $("[data-toggle=popover]").each(function() {

    // Hide this popover if it's visible and if the user clicked outside of it
    if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
      $(this).popover("hide");
    }

  });
});

Answer 14

मुझे बूटस्ट्रैप 2.3.2 पर काम करने में कुछ समस्या थी। लेकिन मैंने इसे इस तरह से स्वीकार किया:

$(function () {
  $(document).mouseup(function (e) {
        if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
            $('.popover').each(function(){
                $(this).prev('.popInfo').popover('hide');
            });
        }
    });

    $('.popInfo').popover({
        trigger: 'click',
        html: true
    });
});

Answer 15

थोड़ा @ समाधान हल किया गया:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    /* this was giving problems and had a bit of overhead
      $.each(visiblePopovers, function() {
        $(this).popover("hide");
      });
    */
    while (visiblePopovers.length !== 0) {
       $(visiblePopovers.pop()).popover("hide");
    }
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

Answer 16

यह सवाल यहां भी पूछा गया था और मेरा जवाब न केवल jQuery डोम ट्रैवर्सल तरीकों को समझने का एक तरीका प्रदान करता है, बल्कि बाहर क्लिक करके पॉपओवर के समापन से निपटने के लिए 2 विकल्प हैं।

एक बार में एक या एक से अधिक पॉपओवर खोलें।

इसके अलावा ये छोटे कोड स्निपेट आइकनों वाले बटन को बंद करने का काम कर सकते हैं!

https://stackoverflow.com/a/14857326/1060487

Answer 17

यह एक आकर्षण की तरह काम करता है और मैं इसका उपयोग करता हूं।

जब आप क्लिक करेंगे तो यह पॉपओवर को खोलेगा और यदि आप फिर से क्लिक करेंगे तो यह बंद हो जाएगा, अगर आप पॉपओवर के बाहर क्लिक करते हैं तो भी पॉपओवर बंद हो जाएगा।

यह 1 से अधिक आबादी के साथ भी काम करता है।

    function hideAllPopovers(){
    $('[data-toggle="popover"]').each(function() {
        if ($(this).data("showing") == "true"){
            $(this).data("showing", "false");
            $(this).popover('hide');                
        }
    });
}
$('[data-toggle="popover"]').each(function() {
        $(this).popover({
            html: true,
            trigger: 'manual'
        }).click(function(e) {
            if ($(this).data("showing") !=  "true"){
                hideAllPopovers();
                $(this).data("showing", "true");
                $(this).popover('show');
            }else{
                hideAllPopovers();
            }
            e.stopPropagation();
        });
});

$(document).click(function(e) {
    hideAllPopovers();
});

Comments

यह एकमात्र ऐसा है जिसने मेरे लिए काम किया। बूटस्ट्रैप 3.20। धन्यवाद।

— टेलीगार्ड

Answer 18

एक और समाधान, इसने उस समस्या को कवर किया, जिसे मैंने पॉपओवर के वंशज पर क्लिक किया था:

$(document).mouseup(function (e) {
    // The target is not popover or popover descendants
    if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
        $("[data-toggle=popover]").popover('hide');
    }
});

Answer 19

मैं इसे नीचे के रूप में करता हूं

$("a[rel=popover]").click(function(event){
    if(event.which == 1)
    {   
        $thisPopOver = $(this);
        $thisPopOver.popover('toggle');
        $thisPopOver.parent("li").click(function(event){
            event.stopPropagation();
            $("html").click(function(){
                $thisPopOver.popover('hide');
            });
        });
    }
});

उम्मीद है की यह मदद करेगा!

Answer 20

यदि आप pjax के साथ ट्विटर बूटस्ट्रैप पॉपओवर का उपयोग करने की कोशिश कर रहे हैं, तो यह मेरे लिए काम कर रहा है:

App.Utils.Popover = {

  enableAll: function() {
    $('.pk-popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right',
      }
    );
  },

  bindDocumentClickEvent: function(documentObj) {
    $(documentObj).click(function(event) {
      if( !$(event.target).hasClass('pk-popover') ) {
        $('.pk-popover').popover('hide');
      }
    });
  }

};

$(document).on('ready pjax:end', function() {
  App.Utils.Popover.enableAll();
  App.Utils.Popover.bindDocumentClickEvent(this);
});

Answer 21

@RayOnAir, मेरे पास पिछले समाधानों के साथ एक ही मुद्दा है। मैं @RayOnAir समाधान के भी करीब आता हूं। एक चीज़ जो बेहतर हुई है वह है पहले से खोली हुई पॉपओवर जब दूसरी पॉपओवर मार्कर पर क्लिक करें। तो मेरा कोड है:

var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
  html: true,
  trigger: 'manual'
}).click(function (e) {
  clicked_popover_marker = this;

  $(popover_marker).not(clicked_popover_marker).popover('hide');
  $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
  if (e.target != clicked_popover_marker) {
    $(popover_marker).popover('hide');
    clicked_popover_marker = null;
  }
});

Answer 22

मैंने इसे ऊपर से पबरॉन के सुझाव का एक संशोधित समाधान पाया, क्योंकि उनके समाधान ने क्लास 'पॉपअप-मार्कर' के साथ सभी तत्वों पर पॉपओवर ('छिपाना') को सक्रिय किया। हालाँकि, जब आप डेटा-सामग्री के बजाय html सामग्री के लिए पॉपओवर () का उपयोग कर रहे हैं, जैसा कि मैं नीचे कर रहा हूं, तो उस HTML पॉपअप के अंदर कोई भी क्लिक वास्तव में पॉपओवर ('छिपाने') को सक्रिय करता है, जो तुरंत खिड़की को बंद कर देता है। नीचे दी गई यह विधि प्रत्येक .popup- मार्कर तत्व के माध्यम से पुनरावृत्ति करती है और पहले पता लगा लेती है कि अभिभावक .popup-marker की आईडी से संबंधित है या नहीं, और यदि ऐसा है तो उसे छिपाए नहीं। अन्य सभी divs छिपे हुए हैं ...

        $(function(){
            $('html').click(function(e) {
                // this is my departure from pbaron's code above
                // $('.popup-marker').popover('hide');
                $('.popup-marker').each(function() {
                    if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
                        $(this).popover('hide');
                    }
                });
            });

            $('.popup-marker').popover({
                html: true,
                // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
                content: function() { return $('#html-'+$(this).attr('id')).html(); },
                trigger: 'manual'
            }).click(function(e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
        });

Answer 23

मैं इसके साथ आया:

मेरे परिदृश्य में एक ही पृष्ठ पर अधिक पॉपओवर शामिल थे, और उन्हें छुपाने से बस उन्हें अदृश्य बना दिया गया था और उसके कारण, पॉपओवर के पीछे की वस्तुओं पर क्लिक करना संभव नहीं था। यह विचार विशिष्ट पॉपओवर-लिंक को 'सक्रिय' के रूप में चिह्नित करना है और फिर आप सक्रिय पॉपओवर को बस 'टॉगल' कर सकते हैं। ऐसा करने से पॉपओवर पूरी तरह से बंद हो जाएगा।

$('.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"

Answer 24

मैं एक साधारण मुद्दे के लिए एक सरल समाधान बनाने की कोशिश कर रहा था। उपरोक्त पोस्ट अच्छे हैं लेकिन एक साधारण मुद्दे के लिए बहुत जटिल हैं। तो मैंने एक साधारण सी बात की। बस एक करीबी बटन जोड़ा। मेरे लिए यह एकदम सही है।

            $(".popover-link").click(function(){
                $(".mypopover").hide();
                $(this).parent().find(".mypopover").show();
        })
        $('.close').click(function(){
    $(this).parents('.mypopover').css('display','none');
});



          <div class="popover-content">
        <i class="fa fa-times close"></i>
    <h3 class="popover-title">Title here</h3>
your other content here
        </div>


   .popover-content {
    position:relative;
    }
    .close {
        position:absolute;
        color:#CCC;
        right:5px;
        top:5px;
        cursor:pointer;
    }

Answer 25

मुझे यह पसंद है, सरल अभी तक प्रभावी ।।

var openPopup;

$('[data-toggle="popover"]').on('click',function(){
    if(openPopup){
        $(openPopup).popover('hide');

    }
    openPopup=this;
});

Answer 26

btn-popoverअपने पॉपओवर बटन / लिंक में क्लास जोड़ें जो पॉपओवर खोलता है। इसके बाहर क्लिक करने पर यह कोड पॉपओवर बंद कर देगा।

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

Answer 27

एक और भी आसान समाधान, बस सभी आबादी के माध्यम से पुनरावृति और नहीं तो छिपाएं this।

$(document).on('click', '.popup-marker', function() {
    $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
    var target = $(e.target)[0];
    $('.popup-marker').each(function () {
        // hide any open popovers except for the one we've clicked
        if (!$(this).is(target)) {
            $(this).popover('hide');
        }
    });
});

Answer 28

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

स्पष्ट होने के लिए, बस पॉपओवर को ट्रिगर करें

Answer 29

यह बूटस्ट्रैप 4 में काम करना चाहिए:

$("#my-popover-trigger").popover({
  template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
  trigger: "manual"
})

$(document).click(function(e) {
  if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
    $("#my-popover-trigger").popover("toggle")
  } else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
    $("#my-popover-trigger").popover("hide")
  }
})

स्पष्टीकरण:

• पहला खंड डॉक्स के अनुसार पॉपओवर में प्रवेश करता है: https://getbootstrap.com/docs/4.0/compenders/popovers/
• दूसरे खंड में पहला "अगर" चेक करता है कि क्लिक किया गया तत्व # माय-पॉपओवर-ट्रिगर का वंशज है या नहीं। अगर यह सच है, तो यह पॉपओवर को चालू करता है (यह ट्रिगर पर क्लिक को हैंडल करता है)।
• दूसरे खंड में दूसरा "अगर" चेक करता है कि क्लिक किया गया तत्व पॉपओवर कंटेंट क्लास का वंशज है जो इनिट टेम्पलेट में परिभाषित किया गया था। यदि ऐसा नहीं है तो इसका मतलब है कि क्लिक पॉपओवर कंटेंट के अंदर नहीं था, और पॉपओवर को छिपाया जा सकता है।

Comments

क्या आप कृपया अपने कोड को विस्तृत कर सकते हैं? आप क्या कर रहे हैं, कुछ स्पष्टीकरण जोड़ें?

— मृत्यु वाल्ट्ज

@DeathWaltz मैंने अभी उत्तर में स्पष्टीकरण जोड़ा है।

— बार्ट ब्लास्ट

Answer 30

data-trigger="focus"इसके बजाय प्रयास करें"click" ।

इससे मेरे लिए समस्या हल हो गई।