我想在我的網站上實現show-hidden div塊,就像在stackoverflow.com上一樣 - 當用戶想要將自己隱藏在按鈕「X」上的時候。可能已經有了現成的解決方案?我不是在Javascript中的經文,將非常感激的幫助!用JavaScript和cookies隱藏塊(並記住它)?
6
A
回答
3
這是簡單的工作示例,而無需使用任何外部庫。你可以用你的動畫/設計來改進它。 cookies的這些功能也可以非常簡單,但您可以在將來使用它來設置不僅布爾值。 更新:我添加functon再次顯示您的彈出窗口(主要是調試)。
<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>
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>
啊我記得你需要一個移動檢測太..?下面編輯爲:
相關問題
- 1. PHP會話,COOKIES和記住我功能
- 2. 如何記住DataGridViewRow隱藏屬性
- 3. Javascript cookies和php cookies
- 4. 從代碼隱藏禁用RadioButtonList並使用javascript啓用它
- 5. jQuery,slideToggle - 添加Cookies以記住狀態
- 6. 顯示和隱藏塊js。
- 7. 只執行一次JavaScript函數並記住它
- 8. PHP和Javascript cookies
- 9. JavaScript和Cookies
- 10. 的JavaScript的onmouseover隱藏一個div塊
- 11. javascript - 顯示和隱藏
- 12. 隱藏和顯示多個div並使用jQuery隱藏標題
- 13. rails 4,javascript刪除記錄並隱藏行
- 14. 顯示加載圖像並隱藏它
- 15. 原型插件需要擴展和隱藏div並記住用戶的選擇狀態
- 16. 用Javascript顯示和隱藏文本
- 17. 使用javascript隱藏和顯示divs
- 18. 隱藏和顯示div,使用javascript
- 19. 使用javascript隱藏和顯示元素
- 20. 用Javascript顯示和隱藏內容
- 21. 使用Javascript隱藏和顯示元素
- 22. javascript用於顯示和隱藏html
- 23. 如何創建「記住我」使用jQuery,存儲cookies
- 24. 隱藏塊的jQuery
- 25. JavaScript隱藏DIV
- 26. javascript隱藏divs
- 27. 隱藏標記 - Mapbox
- 28. 隱藏ArcGis標記
- 29. 如何在隱藏字段中設置值並使用Javascript隱藏div?
- 30. Rails教程:重複的方法名稱,記住並記住(用戶),忘記和忘記(用戶)
墨水,非常感謝您的回答我的問題!我非常感謝你的幫助。對不起,我無法立即回答。 – user1103744 2012-01-07 13:38:44
不客氣:) – ink 2012-01-07 17:02:26