jQuery यूआई

के साथ स्क्रीन मोडल का केवल एक हिस्सा बनाना jQuery संवाद के लिए एक मोडल 'स्कोप' बनाने का कोई तरीका है?jQuery यूआई

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Console</title> 

     <link href="console.css" rel="stylesheet" type="text/css" /> 
     <link href="libs/jquery-ui/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="libs/jquery/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript" src="libs/jquery-ui/jquery-ui-1.8.13.custom.min.js"></script> 
    </head> 

    <body> 
     <div id="toolbar"></div> 
     <div id="mainContent"></div> 
     <div id="footer"></div> 
    </body> 
</html>

मैं mainContent क्षेत्र के लिए कुछ मोडल संवाद बनाना चाहते हैं: कुछ हद तक एक काल्पनिक उदाहरण के रूप में, मैं एक पृष्ठ मिल गया है। जब संवाद खुला होता है, तो मैं मुख्य सामग्री क्षेत्र के साथ बातचीत की अनुमति नहीं देना चाहता, लेकिन फिर भी टूलबार और पाद लेख के साथ बातचीत की अनुमति देता हूं।

या यदि किसी पृष्ठ में एकाधिक मुख्य सामग्री-जैसे divs हैं, तो प्रत्येक के पास मोडल संवादों का स्वयं का स्वतंत्र सेट होता है जो अभी भी अन्य divs के साथ बातचीत की अनुमति देता है।

मुझे पता है कि jQuery UI लाइब्रेरी के साथ मोडल संवाद कैसे बनाएं; मेरा प्रश्न विशेष रूप से पूरे पृष्ठ की बजाय पृष्ठ के किसी अनुभाग में औपचारिकता लागू करने के बारे में है, या तो इस लाइब्रेरी का उपयोग करके, या इस तरह से आसानी से इस लाइब्रेरी को पूरा करता है।

स्रोत

2011-06-10 Jeff

सरल समाधान एक छिपे हुए div होगा जो एक ओवरले के रूप में कार्य करेगा। यह हमेशा आपके "मुख्य सामग्री" div के समान आयाम और स्थिति होगी। फिर जेड-इंडेक्स का उपयोग करके अपनी सामग्री के शीर्ष पर उस div को दिखाएं। फिर ओवरले के शीर्ष पर अपना मोडल रखें।

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

संपादन:

Z- इंडेक्स प्रबंधन: मैं बस अन्य z के सूचकांक के साथ टकराव से बचने के लिए एक उच्च आधार संख्या के लिए ओवरले z- सूचकांक स्थापित करेगा। फिर जब भी मोडल दिखाते हैं, तो बस jquery चयनकर्ता होते हैं जो दिखाए गए ओवरले के लिए देखते हैं और उस संख्या में से एक द्वारा मोडल जेड-इंडेक्स को बढ़ाते हैं।

.Overlay 
{ 
    z-index: 200; 
} 

.Modal 
{ 
    //... 
} 

function ShowModal(modalId) 
{ 
    var maxZIndex = 200; 
    $('.Overlay :visible').each(function() //find all visible overlays 
    { 
     var currZIndex = $(this).attr('z-index'); 
     maxZIndex = currZIndex > maxZIndex ? currZIndex : maxZIndex; //max, min alg. 
    } 
    $('#' + modalId).attr('z-index', maxZIndex + 1); 
    //... do some positioning of modal here 
    $('#' + modalId).show(); 
}

पोजिशनिंग: आप वांछित क्षेत्र पर अपने ओवरले की स्थिति के लिए जावास्क्रिप्ट लिखने के लिए की आवश्यकता होगी। मुझे लगता है कि पूर्ण स्थिति का उपयोग करना यह आसान बना देगा। तो जाहिर है आप ओवरले div के केंद्र में मोडल div स्थिति रखना चाहिए।

गणना वास्तव में एक केंद्रित फैशन में कुछ स्थिति रखने के लिए मुश्किल नहीं है। अगर आप उस टुकड़े को करने पर अपना लेना चाहते हैं तो मुझे बताएं।

स्रोत

2011-06-10 15:45:45

इस दृष्टिकोण के बारे में कुछ प्रश्न/टिप्पणियां। मुझे लगता है कि मैं अब अपनी मूल समस्या का हिस्सा होने के बाद से संवाद खुद को मोडल नहीं करूँगा। क्या मुझे दोनों संवादों और इन ओवरले के लिए मैन्युअल रूप से जेड-इंडेक्स का प्रबंधन करना होगा, या क्या संवाद ओवरले प्राप्त करने का कोई तरीका है और केवल ओवरले (उदाहरण के लिए, एक से कम) सेट करें? क्या आपको पता है कि jQuery संवाद स्वचालित रूप से उनके मूल घटक पर केंद्रित होते हैं या क्या यह तर्क है कि मुझे इस प्रक्रिया में निर्माण करने की आवश्यकता होगी? – Jeff

@ जेफ मैंने आपके द्वारा पूछे गए मुद्दों के समाधान के लिए मेरे उत्तर में टिप्पणियां जोड़ दीं। –

क्या कोई ऐसा पृष्ठ है जिसे मैं इस समाधान से संदर्भित कर सकता हूं? आदर्श छद्म एचटीएमएल कोड के साथ आदर्श समाधान बहुत अच्छा होगा। इसे स्वयं करने की कोशिश करेंगे, और इसे यहां पोस्ट करें :) – krizajb

jQuery यूआई

उत्तर

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