jQuery - मैं ओवरले पर एक डीवी कैसे रखूं?

Question

मैं कम से कम jQuery कोड में एक मोडल संवाद करने की कोशिश कर रहा हूं क्योंकि मेरे प्रोजेक्ट में पहले से ही बहुत अधिक jQuery लोड किया गया है। अब है कि मैं एक और दिनचर्या, जबकि इस मॉडल मौजूद है # dim1 पर क्लिक ईवेंट को मारने के लिए है के लिए

$('body').wrapInner('<div />') 
.css('opacity','0.5') 
.css('z-index','2') 
.attr('id','dim1'); 

उपेक्षा:

तो, मैं पहली बार एक उपरिशायी है, जो साथ हासिल की है की जरूरत है। तो, अब मैं शीर्ष पर अपना मॉडल संवाद आकर्षित करने के लिए की जरूरत है:

$('body').append('<div id="test">My Test</div>'); 
$('#test') 
.css('opacity','1.0') 
.css('position','fixed') 
.css('color','#000') 
.css('z-index','2000') 
.css('height','300px') 
.css('width','300px') 
.css('top','50%') 
.css('left','50%'); 

हालांकि, जब मैं यह कर, मैं के साथ एक बाहर #test मंद हो, जब मैं नहीं चाहता कि मंद कर दिया करने के लिए अंत - बस इसके पीछे सामान। चाल क्या है?

Answer 1

यह त्वरित demo देखें, यह कुंजी अपारदर्शी पृष्ठभूमि के शीर्ष पर पूर्ण होने के लिए आदर्श है। डेमो गतिशील रूप से पृष्ठभूमि ओवरले div और मोडल div को शरीर में जोड़ता है लेकिन आप इन्हें HTML में परिभाषित कर सकते हैं और उन्हें दिखा सकते हैं।

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

सीएसएस कक्षाओं को परिभाषित करना और स्क्रिप्ट में किसी तत्व को इनलाइन शैलियों को जोड़ने के बजाय इन्हें जोड़ना कहीं अधिक आसान है। बनाए रखने के लिए आसान है।

Answer 2

मुझे लगता है कि आपका सबसे अच्छा समाधान एक jquery प्लगइन का उपयोग करना हो सकता है। एक त्वरित Google खोज ने इसे फेंक दिया: http://www.ericmmartin.com/simplemodal/ जो आपको तीन लाइनों में क्या चाहिए!

आप कुछ और चाहते हैं, तो jquery overlays plugin page

इसके बारे में नज़र से पर लोड कर रहे हैं, सीएसएस चीजों को सही हो रही करने के लिए महत्वपूर्ण है, और आप के लिए अनुकूल करने के लिए इन उदाहरणों में से सबसे डेमो सीएसएस के साथ आना चाहिए ।

स्पष्ट रूप से यह अधिक बाहरी jquery कोड लाता है जिसके बारे में आप चिंतित हैं - लेकिन मैं सुझाव दूंगा कि एक अच्छी तरह लिखित और स्थिर प्लगइन आपको कोड के बहुत सारे काम/समय/रेखाओं को बचाएगा!