2009-04-17 25 views
33

मैं प्यार में हूँ stackoverflow के एकल रंग "के साथ क्लिक-टू-पास 'संवाद बॉक्स है कि एक उपयोगकर्ता को बधाई जब वे वोट करने के लिए कोशिश करते हैं और लॉग इन नहीं कर रहे हैं या गलत तरीके से इस साइट का उपयोग मँडरा। किसी भी विचार कैसे और/या क्या प्रौद्योगिकी जेफ इन साफ ​​थोड़ा उपकरणोंमैं स्टैक ओवरफ्लो के होवरिंग संवाद कैसे कार्यान्वित करूं?

संपादित लागू करने के लिए प्रयोग किया जाता है:। मैं विशेष रूप से वर्ग संवाद बक्से कि उन पर "बंद करने के लिए क्लिक करें" कहते हैं के बारे में बात कर रहा हूँ मुझे पता है कि पर आयताकार पट्टी लागू करने के लिए स्क्रीन के शीर्ष।

+0

स्रोत कोड देखें? वे बहुत जटिल नहीं लगते –

+1

मुझे संवाद बॉक्स के लिए वास्तविक कोड खोजने में कठिनाई हो रही है, क्या आप कोड पोस्ट कर सकते हैं? – CodingWithoutComments

+0

एसओ की जावास्क्रिप्ट सभी कम हो गई है, इसलिए यह मूल स्रोत को किसी भी तरह से डीकोड करने के लिए कुछ प्रयास करेगा। –

उत्तर

51

हालांकि मैं इस धारणा के तहत था कि उन्होंने इसके लिए jQuery के यूआई संवाद का उपयोग किया, मुझे अब भी यकीन नहीं है। हालांकि, इसे स्वयं को चाबुक करना बहुत मुश्किल नहीं है। इन शैलियों के साथ

$('.showme').click(function() { 
    $('.error-notification').remove(); 
    var $err = $('<div>').addClass('error-notification') 
         .html('<h2>Paolo is awesome</h2>(click on this box to close)') 
         .css('left', $(this).position().left); 
    $(this).after($err); 
    $err.fadeIn('fast'); 
}); 
$('.error-notification').live('click', function() { 
    $(this).fadeOut('fast', function() { $(this).remove(); }); 
}); 

: इस कोड का प्रयास करें

.error-notification { 
    background-color:#AE0000; 
    color:white; 
    cursor:pointer; 
    display: none; 
    padding:15px; 
    padding-top: 0; 
    position:absolute; 
    z-index:1; 
    font-size: 100%; 
} 

.error-notification h2 { 
    font-family:Trebuchet MS,Helvetica,sans-serif; 
    font-size:140%; 
    font-weight:bold; 
    margin-bottom:7px; 
} 

और click here कार्रवाई में यह देखने के लिए।

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

+1

यह बहुत अच्छा है। धन्यवाद! – CodingWithoutComments

+1

मुझे ज़ेड-इंडेक्स को सामने के संवाद को लाने के लिए कुछ विशाल करने के लिए उपयोगी पाया गया है। –

+0

[jQuery BeautyTips] (https://assets.lullabot.com/bt/bt-latest/DEMO/index.html) बिल्कुल वही था जो मुझे चाहिए –

2

आप jQuery लाइब्रेरी का उपयोगके साथ कर सकते हैंबनाने के लिए।

+0

यदि आप हैंवन अभी तक JQuery की जांच नहीं की गई है, यह बहुत अच्छा है, एमएस माइक्रोसॉफ्ट अजाक्स एलओएल को ठीक करने के बजाय इसका इस्तेमाल कर सकता है। एमएस अजाक्स के काम करने के तीन तरीके हैं: घोषणात्मक रूप से (एएसपीएक्स), जावास्क्रिप्ट, और एक्सएमएलस्क्रिप्ट में। अजाक्स 4 में क्लाइंट साइड लिस्ट व्यू जावास्क्रिप्ट फ़ंक्शन को दोहराना जैसे {डेटा टैग} प्रतिस्थापन के साथ होना चाहिए। –

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