बाहर क्लिक करके ट्विटर बूटस्ट्रैप पॉपओवर को कैसे खारिज करें?


289

क्या हम पॉप्यूलर को उसी तरह से खारिज कर सकते हैं जैसे कि मोडल। जब उपयोगकर्ता उनके बाहर कहीं क्लिक करता है तो उन्हें बंद कर दें?

दुर्भाग्य से मैं पॉपओवर के बजाय केवल वास्तविक मोडल का उपयोग नहीं कर सकता, क्योंकि मोडल का अर्थ है स्थिति: निश्चित और वह अब कोई पॉपओवर नहीं होगा। :(


3
इसी तरह के सवाल: stackoverflow.com/q/8947749/1478467
शेरब्रो

इस stackoverflow.com/a/40661543/5823517 को आज़माएँ । माता
ट्यून

data-trigger="hover"और data-trigger="focus"यदि आप टॉगल का उपयोग नहीं करना चाहते हैं, तो पॉपओवर को बंद करने के लिए अंतर्निहित विकल्प हैं। मेरी राय में, data-trigger="hover"सबसे अच्छा उपयोगकर्ता अनुभव प्रदान करता है ... अतिरिक्त .js कोड लिखने की कोई आवश्यकता नहीं है ...
Hooman Bahreini

जवाबों:


461

अद्यतन: थोड़ा और अधिक मजबूत समाधान: http://jsfiddle.net/mattdlockyer/C5GBU/72/

केवल पाठ वाले बटनों के लिए:

$('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');
    }
});

आइकन उपयोग वाले बटनों के लिए (इस कोड में बूटस्ट्रैप 3.3.6 में एक बग है, इस उत्तर में नीचे दिए गए फ़िक्स को देखें)

$('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');
        }
    });

जे एस जेनरेट करने वाले R आर उपयोग '[data-original-title]'के स्थान पर'[data-toggle="popover"]'

कैविएट: ऊपर दिए गए समाधान से कई पॉपओवर को एक बार में खोला जा सकता है।

कृपया एक बार में एक आबादी:

अपडेट: बूटस्ट्रैप 3.0.x, कोड या फिडेल देखें http://jsfiddle.net/mattdlockyer/C5GB4/5/

$('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');
        }
    });
});

यह पहले से खुले हुए पॉपओवर को बंद करता है और उन पर क्लिक नहीं करता है या उनके लिंक पर क्लिक नहीं किया गया है।


अपडेट: बूटस्ट्रैप 3.3.6, फिडेल देखें

बंद करने के बाद समस्या को हल करता है, फिर से खोलने के लिए 2 क्लिक लेता है

$(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
        }

    });
});

अद्यतन: पिछले सुधार की सशर्त का उपयोग करके, यह समाधान हासिल किया गया था। डबल क्लिक और भूत आबादी की समस्या को ठीक करें:

$(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");
            }
        }
    });
});

2
मैं $(document)इसके बजाय संलग्न करता हूं $('body')क्योंकि कभी-कभी bodyपूरे पृष्ठ का विस्तार नहीं होता है।
जसोप

6
पॉपओवर (और बाद में छिपाने की क्रिया) को सक्रिय करने के बाद, पॉपओवर पूरी तरह से छिपा नहीं है; यह अभी दिखाई नहीं दे रहा है। मुद्दा यह है कि अदृश्य अभी तक मौजूद पॉपओवर के नीचे की सामग्री को क्लिक या हॉवर नहीं किया जा सकता है। समस्या नवीनतम Chrome बिल्ड, नवीनतम बूटस्ट्रैप 3 .js पर होती है (अन्य ब्राउज़र भी हो सकते हैं, यह जाँचने की
जहमत नहीं उठाई

6
इसके बजाय '[data-toggle="popover"]', जो जावास्क्रिप्ट उत्पन्न आबादी के साथ काम नहीं करता है, मैं '[data-original-title]'चयनकर्ता के रूप में उपयोग करता हूं ।
नाथन

4
क्या किसी को पता है कि यह समाधान बूटस्ट्रैप के नवीनतम संस्करण के साथ काम क्यों नहीं करता है? निम्नलिखित हो रहा है: पॉपओवर दिखाने के लिए बटन पर क्लिक करें, फिर पॉपओवर को खारिज करने के लिए शरीर पर क्लिक करें, फिर पॉपओवर दिखाने के लिए बटन पर क्लिक करें और पॉपओवर नहीं दिखा। एक बार विफल होने के बाद यदि आप इसे फिर से क्लिक करते हैं तो यह दिखाता है। यह बड़ा अजीब है।
JTunney

3
@JTunney मैं बीएस 3.3.6 चला रहा हूं और अभी भी उस व्यवहार को देख रहा हूं, जहां एक को ख़ारिज करने के बाद पॉपओवर खोलने के लिए दो क्लिक की आवश्यकता होती है।
सेरसुन

65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

यदि आप पॉपओवर को छोड़कर कहीं भी क्लिक करते हैं तो यह सभी पॉपओवर को बंद कर देता है

बूटस्ट्रैप 4.1 के लिए अद्यतन

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

मैंने बटन पर एक वर्ग जोड़ा है जो पॉपओवर (पॉप-बीटीएन) को चलाता है इसलिए इसमें शामिल नहीं है ... यदि ($! (E.target) .closest ('। Popover') लंबाई और&! $ (E) लक्ष्य) .closest ('। btn'))। hasClass ('pop-btn'))
mozgras

2
3 पॉपओवर बटन के साथ, यह कोड समस्याएँ बनाता है। कुछ मामलों में मैं बटन पर क्लिक नहीं कर सकता और बटन फ्लैश किए जाते हैं।
ओपनकोड

1
यह कोड काम करने के लिए नहीं मिल सकता है ... इस फ़िडेल को जांचें और कृपया अपने उत्तर के लिए फ़िडल जोड़ें। jsfiddle.net/C5GBU/102
Mattdlockyer

मेरे लिए सही है। जब मेरे "बाहरी क्लिक" एक नए पॉपओवर को खोलने के लिए हुए थे, तो अन्य उत्तरों के दुष्प्रभाव थे।
फेशियो रेशियो

यह बहुत अच्छा काम करता है, लेकिन इसे अनुकूलित करने का एक तरीका होना चाहिए ताकि यदि आप पॉपओवर की सामग्री पर क्लिक करें, तो यह बंद न हो। जैसे अगर आप पॉपओवर के अंदर <b> टैग के अंदर टेक्स्ट पर क्लिक करते हैं ...
बेन

40

सबसे सरल, सबसे असफल सुरक्षित संस्करण , किसी भी बूटस्ट्रैप संस्करण के साथ काम करता है।

डेमो: http://jsfiddle.net/guya/24mmM/

डेमो 2: आबादी सामग्री के अंदर क्लिक करने पर खारिज नहीं किया जा रहा है http://jsfiddle.net/guya/fjZja/

डेमो 3: कई आबादी: http://jsfiddle.net/guya/6YCjW/


इस लाइन को कॉल करने से सभी पॉपओवर खारिज हो जाएंगे:

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

इस कोड के साथ बाहर क्लिक करने पर सभी आबादी को खारिज करें:

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

ऊपर दिया गया स्निपेट शरीर पर एक क्लिक घटना देता है। जब उपयोगकर्ता किसी पॉपओवर पर क्लिक करता है, तो वह सामान्य व्यवहार करेगा। जब उपयोगकर्ता किसी ऐसी चीज़ पर क्लिक करता है जो पॉपओवर नहीं है तो वह सभी पॉपओवर को बंद कर देगी।

यह उन पॉपओवरों के साथ भी काम करेगा जो जावास्क्रिप्ट के साथ शुरू किए गए हैं, कुछ अन्य उदाहरणों के विपरीत जो काम नहीं करेंगे। (डेमो देखें)

यदि आप आबादी सामग्री के अंदर क्लिक करते समय खारिज नहीं करना चाहते हैं, तो इस कोड का उपयोग करें (लिंक 2 डी डेमो देखें):

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

3
इसी तरह की समस्या थी और इसने बूटस्ट्रैप 3 में काम किया।
wsams

यदि आप पॉपओवर को इस तरह से पास लाते हैं कि पॉपओवर ओवरलैप हो जाता है, जब आप एक पॉपओवर को कहीं बाहर क्लिक करके छिपाते हैं, तो लिंक में से एक काम करना बंद कर देता है। जाँच करें: jsfiddle.net/qjcuyksb/1
संदीप गिरी

1
पॉपओवर में बूटस्ट्रैप-डेटपिकर का उपयोग करते समय अंतिम संस्करण काम नहीं करता है।
14

1
मुझे यह समाधान सबसे अच्छा लगा, क्योंकि स्वीकृत उत्तर में 30 या इतने पॉपअप के साथ एक संसाधन हॉग होना शुरू हो गया
डेविड जी

1
शायद !$(e.target).closest('.popover.in').lengthइससे अधिक कुशल होगा !$(e.target).parents().is('.popover.in')
joeytwiddle

19

बूटस्ट्रैप 2.3.2 के साथ आप ट्रिगर को 'फोकस' पर सेट कर सकते हैं और यह सिर्फ काम करता है:

$('#el').popover({trigger:'focus'});

1
+1, लेकिन महत्वपूर्ण साइड नोट: यह पॉपओवर को बंद नहीं करता है, यदि आप बटन या एंकर पर फिर से क्लिक करते हैं, जबकि स्वीकृत उत्तर देता है।
क्रिश्चियन गोल्हार्ट

18

यह मूल रूप से बहुत जटिल नहीं है, लेकिन ग्लिट्स से बचने के लिए कुछ जाँच करनी है।

डेमो (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');
});

2
यह बाहर नहीं हर जगह क्लिक करके मॉडल को खारिज कर देता है
hienbt88

क्या popover()हॉवर के बजाय ऑन क्लिक से ऐसा करना संभव है ?
जकी अज़ीज़

3
बेशक, लेकिन आपको stopPropagation()क्लिक हैंडलर को दिए गए ईवेंट पर कॉल करने की आवश्यकता है (यदि नहीं, तो छिपने वाला हैंडलर तुरंत पॉपओवर छिपाएगा)। डेमो (jsfiddle)
शेरब्रो

मैं एक ही कार्यक्षमता नीचे कम कोड में नीचे मिल गया है। यह उत्तर फूला हुआ है और प्रश्न के लिए थोड़ा हास्यास्पद है ... वह जो चाहता है, जब आप बाहर क्लिक करते हैं तो पॉपओवर बंद करना चाहते हैं ... यह ओवरकिल और यूजीली है!
mattdlockyer

2
सुधार, मेरा मानना ​​है कि मेरे पास FAR कम कोड में बेहतर कार्यक्षमता है। यह मानता है कि आप केवल एक पॉपअप को देखना चाहते हैं। यदि आप इसे पसंद करते हैं, तो कृपया मेरे उत्तर को नीचे रखें: jsfiddle.net/P3qRK/1 उत्तर: stackoverflow.com/a/14857326/1060487
mattdlockyer

16

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

इसलिए मैंने इसे थोड़ा संशोधित किया:

$(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');
        }
    });
})

1
अच्छा लगा, यह मेरे लिए काम कर रहा है। BTW आप भूल गए a); अंतिम के बाद अपने कोड के अंत में
मर्लिन

1
दूसरी क्लिक से संबंधित वही समस्या थी। यह विफल उत्तर होना चाहिए!
फेलिप लेहो

मैंने ऊपर दिए गए पिछले समाधानों की भी कोशिश की, लेकिन उन लोगों के लिए एक मार्गदर्शन के रूप में जो 2016 के रूप में एक समाधान की तलाश कर रहे हैं, यह एक बेहतर समाधान है।
दारिरू

शीर्ष उत्तर, विज्ञापित के रूप में काम करता है। जैसा कि, अन्य ने नहीं कहा। यह शीर्ष उत्तर होना चाहिए
duggi

पूरी तरह से काम करता है सिवाय मैंने डेटा-टॉगल = "पॉपओवर" का उपयोग नहीं किया। लेकिन आप किसी भी चयनकर्ता को निर्दिष्ट कर सकते हैं जो आपके पॉपओवर ट्रिगर तत्वों से मेल खाता है। अच्छा समाधान और केवल एक है कि मेरे लिए दो क्लिक मुद्दे को हल किया।
सदमे_गोन_विल्ड

11

मैंने तुम्हें कैसे करना है यह दिखाने के लिए एक jsfiddle बनाया:

http://jsfiddle.net/3yHTH/

जब आप बटन पर क्लिक करते हैं और जब आप बटन के बाहर क्लिक करते हैं तो पॉपओवर को छुपाने के लिए विचार पॉपओवर दिखाना होता है।

एचटीएमएल

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

जे एस

$('#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');
});

अच्छा डेमो। मैं सोच रहा हूं कि आप जेक्वेरी ऑब्जेक्ट पर पॉपओवर कैसे कह सकते हैं, पॉपओवर एक बूटस्ट्रैप जेएस प्लगइन है, लेकिन आप वहां किसी भी बूटस्ट्रैप जेएस फाइल को शामिल नहीं करते हैं?
bingjie2680

Jsfiddle में एक js फाइल है। बाएं कॉलम को देखें -> संसाधनों को प्रबंधित करें।
पेंथिरस

ठीक है, मैं देख रहा हूँ कि बूटस्ट्रैप js है। लेकिन यह जाँच नहीं है, यह अभी भी काम करता है?
बिंगजिइ

हाँ यह काम करता है। वैसे भी, मैंने Google में खोज की: jsfiddle bootstrapऔर इसने मुझे jsfiddle में बूटस्ट्रैप css + js का कंकाल दिया।
पेथिरसीस

2
इसके साथ मेरी एकमात्र समस्या यह है कि जब आप इसे क्लिक करते हैं तो आप पॉपओवर को छिपा देते हैं। के रूप में अच्छी तरह से बस एक टूलटिप का उपयोग कर सकते हैं।
NoBrainer

7

बस इस विशेषता को तत्व के साथ जोड़ें

data-trigger="focus"

प्रारंभ में यह मेरे लिए बूटस्ट्रैप 3.3.7 के साथ काम नहीं करता था, लेकिन फिर मैंने डॉक्स पढ़ा और उनके पास कुछ मार्गदर्शन है जो यहां उल्लेख के लायक है। डॉक्स में अस्वीकार्य आबादी उदाहरण से "उचित क्रॉस-ब्राउज़र और क्रॉस-प्लेटफ़ॉर्म व्यवहार के लिए, आपको <a> टैग का उपयोग करना चाहिए, न कि <बटन> टैग, और आपको रोल =" बटन "और टैबइंडेक्स विशेषताओं को भी शामिल करना होगा। । "
जेफ

3

यह पहले पूछा गया है यहाँ है । वही उत्तर जो मैंने दिया था, अभी भी लागू होता है:

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


3

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

यह स्वचालित रूप से स्थिति रखता है इसलिए यह पृष्ठ से कभी नहीं जाता है।

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

यह एक गंभीर आत्म-प्रोमो नहीं है ... मैंने अपने जीवन में कई बार अन्य लोगों के कोड को पकड़ा है, मैं अपने स्वयं के प्रयासों की पेशकश करना चाहता था। इसे एक चक्कर दें और देखें कि क्या यह आपके लिए काम करता है।


3

Http://getbootstrap.com/javascript/#popovers के अनुसार ,

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

अगले क्लिक पर पॉपओवर को खारिज करने के लिए फोकस ट्रिगर का उपयोग करें जो उपयोगकर्ता बनाता है।

$('.popover-dismiss').popover({
    trigger: 'focus'
})

2
मैक ब्राउज़र पर काम नहीं करता है जो ओएस एक्स मूल व्यवहार का पालन करता है (जो कि क्लिक पर फोकस नहीं करता है और न ही बटन को धुंधला करता है)। इनमें फ़ायरफ़ॉक्स और सफारी शामिल हैं। बूटस्ट्रैप लोगों ने यहां एक बड़ी गलती की है, क्योंकि ये पॉपओवर भी नहीं खोले जा सकते हैं, अकेले खारिज कर दें।
एनटी वृली

2
@AnteVrli हो सकता है कि यह अभी तक नहीं दस्तावेज में जब आप अपनी टिप्पणी में लिखा था लेकिन अभी दस्तावेज़ कहते हैं: "उचित पार ब्राउज़र और पार मंच व्यवहार के लिए, आप का उपयोग करना चाहिए <a>टैग, नहीं <button>टैग, और आप भी शामिल करना चाहिए role="button"और tabindexजिम्मेदार बताते हैं। " क्या आपने इसे इन विशिष्टताओं के साथ आज़माया है?
लुई

3
ठीक है, वहाँ है एक माउस बटन दबाकर: इस जवाब है, जो मंच संगतता के साथ कोई संबंध नहीं है के साथ एक समस्या के अंदर एक पॉपओवर पॉपओवर खारिज क्योंकि तत्व यह है कि पॉपओवर चलाता है फोकस खो देंगे होगा। भूल जाना उपयोगकर्ताओं को पॉपओवर से कॉपी-और-पेस्ट करने में सक्षम होना चाहिए: जैसे ही माउस बटन डाउन होता है, पॉपओवर बंद हो जाता है। यदि आपके पास पॉपओवर (बटन, लिंक) में एक्शन करने योग्य आइटम हैं, तो उपयोगकर्ता उनका उपयोग नहीं कर पाएंगे।
लुई

'क्रॉस-प्लेटफ़ॉर्म' के लिए बहुत कुछ क्योंकि बूटस्ट्रैप 4.0.0-बीटा और 4.0.0-beta.2 में मैं मैक पर क्रोम में काम करने के लिए इसे प्राप्त नहीं कर सकता :(
rmcsharry

3

संशोधित स्वीकृत समाधान। जो मैंने अनुभव किया है कि कुछ आबादी के छिपने के बाद, उन्हें फिर से दिखाने के लिए दो बार क्लिक करना होगा। यहाँ मैंने यह सुनिश्चित करने के लिए क्या किया है कि पॉपओवर ('छिपाना') पहले से छिपी हुई आबादी पर नहीं बुलाया जा रहा है।

$('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
            }
        }
    });
});


3

यह समाधान ठीक काम करता है:

$("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');
});

2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

2

आप DOM से पॉपअप हटाने के लिए ईवेंट बुबलिंग का भी उपयोग कर सकते हैं। यह थोड़ा गंदा है, लेकिन ठीक काम करता है।

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

अपने html में पॉपपॉयर के अंदर .popover- क्लोज्ड क्लास को जोड़ें जिससे पॉपओवर बंद हो।


2

ऐसा लगता है कि 'छिपाने' की विधि काम नहीं करती है यदि आप चयनकर्ता के प्रतिनिधिमंडल के साथ पॉपओवर बनाते हैं, इसके बजाय 'नष्ट' का उपयोग किया जाना चाहिए।

मैंने इसे इस तरह काम किया:

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


2

हमें पता चला कि हमारे पास @mattdlockyer (समाधान के लिए धन्यवाद!) से समाधान के साथ एक मुद्दा था। जब इस तरह के निर्माण के लिए चयनकर्ता संपत्ति का उपयोग कर ...

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

... बीएस 3 के लिए प्रस्तावित समाधान काम नहीं करेगा। इसके बजाय यह अपने लिए एक दूसरा पॉपओवर उदाहरण बनाता है $(this)। इसे रोकने के लिए यहां हमारा समाधान है:

$(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();
        }
    });
});

जैसा कि उल्लेख किया गया $(this).popover('hide');है कि प्रत्यायोजित श्रोता के कारण दूसरा उदाहरण बनेगा। प्रदान किया गया समाधान केवल आबादी को छुपाता है जो पहले से ही अस्थिर हैं।

मुझे आशा है कि मैं आप लोगों को कुछ समय बचा सकता था।


2

बूटस्ट्रैप मूल रूप से इसका समर्थन करता है :

जेएस बिन डेमो

खारिज-पर-अगले-क्लिक के लिए आवश्यक विशिष्ट मार्कअप

उचित पार ब्राउज़र और पार मंच व्यवहार के लिए, आप का उपयोग करना चाहिए <a>टैग, नहीं<button> टैग, और आप भी शामिल करना चाहिए role="button"और tabindexविशेषताओं।


बूटस्ट्रैप में 4.0.0-बीटा और 4.0.0-beta.2 मुझे क्रोम में मैक पर काम करने के लिए नहीं मिल सकता है :(
rmcsharry

कहीं भी क्लिक करने से यह पॉपओवर बंद हो जाता है, प्रश्नकर्ता को "पॉपओवर के बाहर क्लिक करें इसे बंद करना पड़ता है", जो अलग है।
philw

2

दूसरी बार पॉपओवर दिखाते समय यह समाधान pesky 2nd क्लिक से छुटकारा दिलाता है

बूटस्ट्रैप 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();                
        }
    });
});

2

मैंने पिछले जवाबों में से कई की कोशिश की है, वास्तव में मेरे लिए कुछ भी काम नहीं करता है लेकिन इस समाधान ने किया:

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

वे एंकर टैग नहीं बटन का उपयोग करने की सलाह देते हैं और भूमिका = "बटन" + डेटा-ट्रिगर = "फ़ोकस" + टैबइंडेक्स = "0" विशेषताओं का ध्यान रखते हैं।

उदाहरण के लिए:

<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>

इस संदर्भ को भी आज़माएं: stackoverflow.com/questions/20466903/…
अहमद एल दमसी

1

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

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

1

नई आबादी (बूटस्ट्रैप 3) दिखाए जाने से पहले मैं अन्य सक्रिय पॉपओवरों को हटा देता हूं:

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

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

1

3.3.6 के साथ परीक्षण किया गया और दूसरा क्लिक ठीक है

        $('[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');
                }
            });
        });

0

डेमो: 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;
});

}

यह इसके लिए मेरा समाधान है।


0

यह दृष्टिकोण यह सुनिश्चित करता है कि आप पृष्ठ पर कहीं भी क्लिक करके एक पॉपओवर को बंद कर सकते हैं। यदि आप किसी अन्य क्लिक करने योग्य इकाई पर क्लिक करते हैं, तो यह अन्य सभी पॉपओवर को छुपाता है। एनीमेशन: झूठे की आवश्यकता है अन्यथा आपको अपने कंसोल में एक jquery .remove त्रुटि मिलेगी।

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

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

0

ठीक है, यह मेरी पहली कोशिश है कि वास्तव में स्टैकओवरफ़्लो पर किसी चीज़ का जवाब देना है इसलिए यहाँ कुछ भी नहीं है: पी

ऐसा लगता है कि यह काफी स्पष्ट है कि यह कार्यक्षमता वास्तव में बाहर बॉक्स के नवीनतम बूटस्ट्रैप पर अच्छी तरह से, काम करता है (यदि आप समझौता करने को तैयार हैं नहीं है जहां उपयोगकर्ता क्लिक कर सकता है। मुझे यकीन नहीं है कि आपको क्लिक करना है। hover 'per-se लेकिन एक iPad पर, एक टॉगल के रूप में काम करता है पर क्लिक करें।

अंतिम परिणाम है, एक डेस्कटॉप पर आप होवर कर सकते हैं या क्लिक कर सकते हैं (अधिकांश उपयोगकर्ता होवर करेंगे)। एक स्पर्श डिवाइस पर, तत्व को छूने से इसे ऊपर लाया जाएगा, और इसे फिर से छूने से इसे नीचे ले जाएगा। बेशक, यह आपकी मूल आवश्यकता से थोड़ा सा समझौता है लेकिन कम से कम आपका कोड अब क्लीनर है :)

$ ("मेरा-पॉपओवर")। पॉपओवर ({ट्रिगर: 'क्लिक हॉवर'});


0

मैट लॉकर का कोड लेते हुए, मैंने एक साधारण रीसेट किया है ताकि डोम छिपाने पर तत्व द्वारा कवर न हो।

मैट का कोड: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

फिडल: 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');
        }
    });
});

0

यह कोशिश करो, यह बाहर क्लिक करके छिपाएगा।

$('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');
    }
    });
});

0

मैं mattdlockyer के समाधान के साथ समस्या हो रही थी क्योंकि मैं इस तरह कोड का उपयोग करके गतिशील रूप से पॉपओवर लिंक स्थापित कर रहा था:

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

इसलिए मुझे इसे ऐसे ही संशोधित करना पड़ा। इसने मेरे लिए बहुत सारे मुद्दे तय किए:

$('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');
    }
  });
});

याद रखें कि तत्व से छुटकारा मिल जाता है, इसलिए पॉपओवर को शुरू करने पर चयनकर्ता भाग महत्वपूर्ण है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.