2012-02-15 8 views
5

मैं मैन्युअल मोड में ट्विटर की बूटस्ट्रैप लाइब्रेरी से पॉपओवर ऑब्जेक्ट का उपयोग कर रहा हूं और मैं सोच रहा था कि उपयोगकर्ता टूलटिप को बंद करने के बारे में कैसे जाना चाहिए जब उपयोगकर्ता इससे दूर क्लिक करता है।जब कोई उपयोगकर्ता इससे दूर क्लिक करता है तो बूटस्ट्रैप पॉपओवर (या सामान्य रूप से कोई आइटम) को बंद करने के लिए कैसे?

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a> 

और मेरे जावास्क्रिप्ट:

$('#stats-bar').click(function(e) { 
     $(this).popover('show'); 
}); 

कैसे जब उपयोगकर्ता कहीं भी क्लिक कर मैं पॉपओवर छिपा कर सकते हैं लेकिन पॉपओवर ही

यहाँ मेरी HTML है? मैंने पॉपओवर के पीछे एक निश्चित पारदर्शी div का उपयोग करने और इसके क्लिक ईवेंट को सेट करने का विचार किया लेकिन मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है।

उत्तर

2

मैंने पॉपओवर के पीछे एक निश्चित पारदर्शी div का उपयोग करने का विकल्प चुना और इसके क्लिक ईवेंट को सेट किया क्योंकि यह सबसे मजबूत और सरल समाधान जैसा लगता है।

0

एक सामान्य क्लिक ईवेंट श्रोता के बारे में क्या है जो ट्रिगर करता है जहां आप कभी भी शरीर के भीतर क्लिक करते हैं? इस पोस्ट को देखें, यह वही दिखता है जो आप प्राप्त करने की कोशिश कर रहे हैं।

https://stackoverflow.com/a/2125122/1013422

आप इस का उपयोग वास्तविक पॉपओवर

$('#stats-bar').popover('hide') 

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

6

मैं तारों दस्तावेज़ क्लिक करें घटना को समाप्त हो गया और उस बिंदु

 $(document).click(function (e) 
     { 
      // check the parents to see if we are inside of a tool tip. If the click came 
      // from outside the tooltip, then hide our tooltip 
      if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide'); 
     }); 

पर किसी भी टूलटिप्स छिपाने आप क्लिक करें घटना अप करने के लिए एक मैनुअल ट्रिगर विकल्प और तारों का उपयोग कर रहे हैं, तो टूलटिप आप की आवश्यकता होगी दिखाने के लिए उपकरण को रोकने के लिए e.stopPropagation() को कॉल करने के लिए टूलटिप दिखाते समय फायरिंग से ईवेंट पर क्लिक करें।

+0

यह जवाब होना चाहिए, यह अभी तक देखा गया सबसे स्वच्छ और सरल समाधान है –

संबंधित मुद्दे