2011-12-17 29 views
6

Tôi muốn triển khai trên khối div hiển thị ẩn của trang web của tôi như trên stackoverflow.com - tại thời điểm người dùng muốn ẩn nó vào putted trên nút "X". Có thể đã có một giải pháp làm sẵn? Tôi không phải là câu trong Javascript và sẽ rất biết ơn sự giúp đỡ!Ẩn khối (và nhớ nó) bằng JavaScript và cookie?

Ảnh:

Trả lời

3

Đây là ví dụ đơn giản làm việc mà không sử dụng bất kỳ thư viện bên ngoài. Bạn có thể cải thiện nó với hoạt hình/thiết kế của bạn. Ngoài ra các chức năng này cho các cookie có thể rất đơn giản nhưng bạn có thể sử dụng nó trong tương lai để đặt không chỉ giá trị boolean. CẬP NHẬT: Tôi đã thêm functon để hiển thị lại cửa sổ bật lên của bạn (để gỡ lỗi chủ yếu).

<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

mực, BIG nhờ cho câu trả lời của bạn cho câu hỏi của tôi! Tôi vô cùng biết ơn sự giúp đỡ của bạn. Xin lỗi vì tôi không thể trả lời ngay được. – user1103744

+1

Bạn được chào đón :) – ink

0

Alternative:

-> 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> 

Ah tôi nhớ bạn cần có một phát hiện điện thoại di động quá ..? Ở đây, chỉnh sửa là:

Để phát hiện điện thoại di động:
jsfiddle.net/axcelleria/nmosxbgm/

Các vấn đề liên quan