स्टैक ओवरफ्लो में जैसे पॉपअप संदेश कैसे दिखाया जाए

Question

मैं एक पॉपअप संदेश जोड़ना चाहूंगा जो कि स्टैक ओवरफ्लो पर दिखाई देता है जब मैं लॉग इन नहीं होता हूं और मैं वोट बटन का उपयोग करने का प्रयास करता हूं।

उसे प्राप्त करने के लिए सबसे अच्छी विधि क्या है? यह एक jquery पुस्तकालय का उपयोग किया जाता है?

Comments

स्रोत देखें!

— जोश स्टोडोला

नहीं है समान प्रश्न। आप यह भी जाँच कर सकते हैं।

— शोभन

मैंने ऐसा किया, और यह प्रश्न का संदर्भ देता प्रतीत हुआ ।min.js मुझे वह प्लगइन नहीं मिला जिससे मैंने सवाल पूछा

— पुनीत

Dojo का एक UpgradBar है जो ऐसा करता है: trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/… trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/…

— mwilcox

Answer 1

EDIT : नीचे दिए गए कोड से पता चलता है कि नया बैज मिलने पर स्क्रीन के शीर्ष पर दिखाई देने वाली पट्टियों को कैसे दोहराया जाए, सबसे पहले साइट पर आएं, इत्यादि: जब आप बहुत तेज़ टिप्पणी करने का प्रयास करते हैं, तो आपको प्राप्त होने वाले संवादों के लिए, वोट दें अपने स्वयं के प्रश्न आदि के लिए, इस प्रश्न की जांच करें कि मैं यह कैसे दिखाऊं या सीधे उदाहरण पर जाऊं ।

---

यहां बताया गया है कि Stackoverflow यह कैसे करता है:

यह मार्कअप है, शुरू में छिपा हुआ है इसलिए हम इसे इसमें फीका कर सकते हैं:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

यहाँ लागू शैलियों हैं:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

और यह जावास्क्रिप्ट (jQuery का उपयोग करके) है:

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

और वोइला। अपने पृष्ठ के सेटअप के आधार पर आप डिस्प्ले पर बॉडी मार्जिन-टॉप को भी संपादित करना चाह सकते हैं।

यहाँ कार्रवाई में इसका एक डेमो है।

Comments

प्रश्न को फिर से पढ़ना मुझे नहीं लगता कि यह वही है जो ओप चाहता था। मुझे लगता है कि वह उन बॉक्सों की तलाश कर रहा है जो साइट के चारों ओर नोटिस करते हैं जो आप करते हैं। मुझे लगता है कि मैं इसे वैसे भी छोड़ दूंगा।

— पाओलो बेरगीनो

पाओलो, इसे छोड़ने के लिए धन्यवाद! मुझे लगता है कि इस क्रिया के लिए मैं जो कुछ भी इस्तेमाल कर रहा था, उससे काफी बेहतर काम कर सकता है।

— जेरॉक्स

जवाब नहीं है, जबकि समान रूप से उपयोगी: P

— rball

जब आप X पर क्लिक करते हैं तो आपको कुकी सेट करने की भी आवश्यकता होती है, ताकि आप अधिक पृष्ठों पर जाते समय दिखाई न दें।

— असंतुष्टगीतगो

काश, मैं भी जवाब दे पाता। इस उत्कृष्ट प्रविष्टि के लिए धन्यवाद!

— चापलूसी

Answer 2

इसके अलावा चेकआउट jQuery UI डायलॉग

Answer 3

मैं jqModal का उपयोग करता हूं , उपयोग करना आसान है और आप कुछ महान प्रभाव प्राप्त कर सकते हैं

Answer 4

AJAX नियंत्रण टूलकिट में ModalPopup का उपयोग करना एक और तरीका है जिससे आप इस प्रभाव को प्राप्त कर सकते हैं।

Comments

कृपया टिप्पणी करें, एक मूल पॉपअप का उपयोग करके मूल प्रश्न के लिए पूरी तरह से मान्य है।

— मारिज

Answer 5

यहाँ मुझे StackOverflow स्रोत को देखने से क्या मिला। उम्मीद है कि किसी के लिए कुछ समय बचाता है। ShowNotification फ़ंक्शन का उपयोग उन सभी पॉपअप संदेशों के लिए किया जाता है।

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};

//master...
showErrorPopup: function (e, h, f) {
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
    var i = function () {
        g.fadeOutAndRemove()
    };
    $(e).append(g);
    g.click(i).fadeIn("fast");
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}

सीएसएस

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}

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

Answer 6

बूटस्ट्रैप की जाँच करें । कुछ पॉप-अप प्रभाव, मोडल, संक्रमण, अलर्ट, सब कुछ आधारित javascriptऔर हैं css।