एक साधारण मोडल पॉपअप बनाएं

Question

मेरे पास एक बहुत ही सरल आवश्यकता है। मेरे पास दो div है एक लिंक और Div2 के साथ Div1 कुछ पाठ है।

Div1 में लिंक के क्लिक पर, मैं एक ग्रे पृष्ठभूमि और एक करीबी बटन के साथ एक साधारण मोडल पॉपअप के रूप में Div2 प्रदर्शित करना चाहता हूं।

अब बाहरी प्लगइन का उपयोग किए बिना ऐसा करना संभव है।

यदि नहीं, तो मैंने jqueryui पर एक प्लगइन की जांच की। हालांकि तह उदाहरण में संदर्भित बहुत सी jquery और css फाइलें हैं, जिन्हें मैं नहीं जानता कि क्या लेना है और क्या छोड़ना है।

Answer 1

यह निश्चित रूप से प्लगइन के बिना संभव है, लेकिन यह गंभीर नलसाजी के रूप में बाहर हो सकता है।
मैंने शुद्ध जावास्क्रिप्ट में स्वयं 'होम-निर्मित' मोडल विंडोज कार्यान्वयन का उपयोग किया है।
मेरा विश्वास करो - यह एक अच्छा विचार नहीं है। JQuery के साथ भी (jQuery यूआई के साथ भ्रमित मत करो)।

मैं आपको एरिक मार्टिन द्वारा 'SimpleModal' plugin की सलाह दूंगा (वह स्टैक ओवरव्लो पर भी है और कम से कम अपने उत्पाद से संबंधित प्रत्येक प्रश्न का उत्तर देने का प्रयास किया है)।
मुझे यह एपीआई पसंद है और यह एक आकर्षण की तरह काम करता है।

Answer 2

Here's a tutorial इस तरह कुछ करने के तरीके पर।

Answer 3

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

Answer 4

आप इसे बिना किसी प्लगइन के कर सकते हैं, लेकिन मुश्किल हिस्सा जिसे आप शायद टालना चाहते हैं वह मॉड्यूलरिटी है।

यदि आप क्लिक करते हैं और ड्रैग करते समय संवाद बॉक्स को स्थानांतरित करना चाहते हैं, तो आपको उस स्थिति की स्थिति को माउस स्थिति के आधार पर सेट करना होगा, जो कि बहुत तेज तेज़ी से हो सकता है। इसलिए jqueryui विकल्प।

मैं मानता हूं, सीएसएस आपको कभी-कभी चकित करने के लिए पर्याप्त है।

ओह, और सिर्फ इसलिए यह कहा गया है, तो आप एक बटन है कि किसी भी ब्राउज़र के यूआई फिट करने के लिए morph होगा साथ एक आदर्श ग्रे बॉक्स प्राप्त कर सकते हैं: alert()

Answer 5

पहले, SimpleModal सिफारिश के लिए धन्यवाद @Arnis एल

दूसरा, एक कारण है कि इतने सारे मोडल/लाइटबॉक्स प्लगइन्स मौजूद हैं। क्रॉस-ब्राउज़र संगत कुछ ऐसा बनाने के लिए कई कारक हैं। तो, जो भी आप चाहते हैं वो कर रहे हैं/बाहरी प्लगइन्स संभव है, लेकिन इसे सही करने के लिए, यह बहुत सारे कोड लेने जा रहा है।

तो, आप एक सरल मॉडल ... SimpleModal कोशिश क्यों नहीं बनाने के लिए सहायता मांगी;)

आप उदाहरण के किसी भी डाउनलोड कर सकते हैं आप आरंभ करने के लिए। आपको बस इतना करना होगा कि SimpleModal .js फ़ाइल को अपने पृष्ठ पर शामिल करें और कुछ शैलियों को जोड़ें और यह जाने के लिए तैयार है।

http://www.ericmmartin.com/projects/simplemodal-demos/