2011-12-17 12 views
6

मैं अपनी साइट शो-छुपा डिव ब्लॉक पर stackoverflow.com पर लागू करना चाहता हूं - एक समय जब उपयोगकर्ता इसे छिपाना चाहता है "बटन" बटन पर डाल दिया। पहले से तैयार समाधान हो सकता है? मैं जावास्क्रिप्ट में कविता नहीं हूं और मदद के लिए बहुत आभारी हूं!जावास्क्रिप्ट और कुकीज़ के साथ ब्लॉक छुपाएं (और इसे याद रखें)?

चित्र:

उत्तर

3

यह किसी भी बाहरी पुस्तकालय का उपयोग किए बिना उदाहरण काम कर सरल है। आप इसे अपने एनीमेशन/डिज़ाइन के साथ बेहतर बना सकते हैं। कुकीज़ के लिए भी ये कार्य बहुत आसान हो सकते हैं लेकिन आप भविष्य में इसका उपयोग न केवल बुलियन मूल्य निर्धारित करने के लिए कर सकते हैं। अद्यतन: मैंने आपके पॉपअप को फिर से दिखाने के लिए फ़ंक्शन जोड़ा (ज्यादातर डीबग के लिए)।

<html> 
<head> 
<script type="text/javascript"> 
function setCookie (name, value, expires, path, domain, secure) { 
    document.cookie = name + "=" + escape(value) + 
    ((expires) ? "; expires=" + expires : "") + 
    ((path) ? "; path=" + path : "") + 
    ((domain) ? "; domain=" + domain : "") + 
    ((secure) ? "; secure" : ""); 
} 
function getCookie (name) { 
    var cookie = " " + document.cookie; 
    var search = " " + name + "="; 
    var setStr = null; 
    var offset = 0; 
    var end = 0; 
    if (cookie.length > 0) { 
     offset = cookie.indexOf(search); 
     if (offset != -1) { 
      offset += search.length; 
      end = cookie.indexOf(";", offset); 
      if (end == -1) { 
       end = cookie.length; 
      } 
      setStr = unescape(cookie.substring(offset, end)); 
     } 
    } 
    if (setStr == 'false') { 
     setStr = false; 
    } 
    if (setStr == 'true') { 
     setStr = true; 
    } 
    if (setStr == 'null') { 
     setStr = null; 
    } 
    return(setStr); 
} 
function hidePopup() { 
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none'; 
} 
function showPopup() { 
    setCookie('popup_state', null); 
    document.getElementById('popup').style.display = 'block'; 
} 
function checkPopup() { 
    if (getCookie('popup_state') == null) { // if popup was not closed 
     document.getElementById('popup').style.display = 'block'; 
    } 
} 

</script> 
</head> 
<body onload="checkPopup();"> 
    <div id="popup" style="display:none">Hello! Welcome to my site. If you want to hide this message then click <a href="#" onclick="hidePopup(); return false;">[x]</a></div> 
    <div>Some static text here.</div> 
    <div>Bring me <a href="#" onclick="showPopup(); return false;">back</a> my popup!</div> 
</body> 
</html> 
+1

स्याही, बिग धन्यवाद! मैं आपकी मदद के लिए अविश्वसनीय रूप से आभारी हूं। क्षमा करें कि मैं तुरंत जवाब नहीं दे सका। – user1103744

+1

आपका स्वागत है :) – ink

0

वैकल्पिक:

-> Using localStorage instead of cookie<br/> 
-> LocalStorage never expire until they delete personal data on browser<br/> 
-> jQuery Library for easy customization on future<br> 
-> re-display hidden remembered content<br> 
-> jsfiddle.net/axcelleria/41t76s8q/<br> 

आह मैं भी तुम्हें एक मोबाइल का पता लगाने की जरूरत है याद ..? यहाँ संपादित है:

मोबाइल खोज के लिए: मेरी सवाल का जवाब के लिए
jsfiddle.net/axcelleria/nmosxbgm/