2013-02-20 19 views
5

मैंने अपने एचटीएमएल पेज पर एक छवि लोड की है और मैं माउस क्लिक स्थिति पर ट्विटर बूटस्ट्रैप से एक पॉपओवर खोलना चाहता हूं। मैंने अभी तक जो किया है वह छवि के किनारे पॉपओवर खोलना है। लेकिन मैं वास्तव में क्या करना चाहता हूं, जहां भी मैंने छवि पर क्लिक किया है, पॉपओवर खोलना है।माउस पर एक पॉपओवर कैसे खोलें स्थान

मैं इसे कैसे प्राप्त कर सकता हूं?

+0

आपने अभी तक क्या प्रयास किया है? कोई नमूना कोड दूसरों को आपकी समस्या का उत्तर देने में मदद करेगा। – shabeer90

उत्तर

17

आपको माउस निर्देशांक प्राप्त करने और पॉप-अप को क्लिक करने के लिए अपनी स्क्रिप्ट का उपयोग करने की आवश्यकता है। आप jQuery उपयोग कर रहे हैं यह मदद कर सकता है:

$('#yourimage').click(function(){ 
     $('#popover').css('left', pageX-(popover width)+'px'); 
     $('#popover').css('top', pageY-(popover height)+'px'); 
}) 

--- संपादित करें ---

Here's a demo क्या आप के बाद कर रहे हैं की

+0

इसके अलावा, आपको अपने '# popover' पर' स्थिति: पूर्ण 'सेट करने की आवश्यकता है। – otinanai

+0

स्थिति: पूर्ण बूटस्ट्रैप सीएसएस फ़ाइल में पूर्ण रूप से सेट किया गया है और नई शैलियों में फिर से सेट करने की आवश्यकता नहीं है क्योंकि स्थिति तत्व केवल बाद में – Shail

+0

में उल्लिखित रीसेट करेंगे, मेरे पास आपके सीएसएस की एक तस्वीर नहीं थी इसलिए मैं बस था यह सुनिश्चित करना कि आप इसे सही तरीके से सेट करें। – otinanai

-3

अपनी पसंद के समन्वय का उपयोग कर

.popover { 
top: 20px !important;/*put your position */ 
left: 20px !important;/*put your position*/ 
} 

बस स्थिति तत्वों को रीसेट अन्य सभी शैलियों मुख्य bootstrap.css में बरकरार रखना होगा द्वारा .popover वर्ग लेखन से अधिक की कोशिश करो।

+1

हाँ, लेकिन माउस क्लिक स्थिति के आधार पर मैं इसे कैसे कर सकता हूं? मुझे यह कोड एक .js फ़ाइल में रखना चाहिए –

+0

आपको यह कोड सीएसएस फ़ाइल में रखना होगा। – Shail

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