用按鈕刪除整個會話的消息？

我使用下面的代碼在移動設備（智能手機或平板電腦）處於縱向模式時顯示消息。這工作正常！用按鈕刪除整個會話的消息？

但是，我需要的代碼是，當用戶單擊X按鈕時，只要在該會話中訪問網站的任何頁面，就不會再出現該消息。

但是，如果網站已關閉，在下次訪問時，當以縱向模式查看網站時，該消息應該再次出現。

這怎麼辦？

html, 
 
body { 
 
    width: 100%; 
 
    height: 200%; 
 
} 
 

 
#warning-message { 
 
    display: none; 
 
} 
 

 
@media only screen and (orientation:portrait) { 
 
    #warning-message { 
 
    display: block; 
 
    } 
 
} 
 

 
@media only screen and (orientation:landscape) { 
 
    #warning-message { 
 
    display: none; 
 
    } 
 
} 
 

 
#landscape-button { 
 
    background-color: #2A3847; 
 
    color: #ffffff; 
 
    border-radius: 0px; 
 
    border: 1px solid white; 
 
    padding: 10px 10px 10px 10px; 
 
    float: right; 
 
    margin-top: -25px; 
 
    margin-right: -15px; 
 
    font-size: 1.3em; 
 
}

Please open in "full page" mode and scale your window to a portrait size to see the message appear.<br><br> 
 
<div id="warning-message" style="position:fixed; margin: 0 auto 0 auto; z-index: 99999999; background-color: #2A3847; width: 90vw; min-height: 90vh; text-align:center; padding:25px 15px 35px 15px; right: 0; 
 
    left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto;"> 
 
    <button type="button" id="landscape-button">X</button> 
 
    <p style="font-size: 1.3em; color: #ffffff; positie:absolute; text-align:center;"><span style="margin: 0 0 0 25px; text-align:center; font-size: 2em; letter-spacing: -0.04em;">please rotate your screen</span><br><br>This website is best viewed in landscape mode. So please, rotate your mobile device, and if activated also disable 
 
    your screen rotation lock. If you prefer to remain in portrait mode, ignore this message and close it at the "x".</p> 
 
</div>

來源

2017-06-27 Eddy

你應該去的cookie。 –

我會怎麼做，@Nirav Joshi。如果用戶關閉了cookies，該怎麼辦？ – Eddy

比你可以使用會話。 –

考慮到會話存儲只在點擊「X」按鈕後才啓動，以下是有效的。因此，即使在點擊關閉按鈕「X」之前重新加載頁面，當窗口調整爲肖像模式或移動設備處於肖像模式時，仍然會顯示消息。單擊「X」按鈕後，在同一會話內重新加載頁面時，消息不再出現。

See the example here!

$(document).ready(function() { 
    var data = sessionStorage.getItem('isfirst'); 
    if (data == undefined) { 
     $("#warning-message").addClass("shown-modal"); 
    } else { 
     $("#warning-message").hide(); 
    } 
}); 
//close the pop 
$("#landscape-button").on('click', function() { 
    sessionStorage.setItem('isfirst', 'true'); 
    $("#warning-message").hide(); 
});

來源

2017-07-07 08:54:26 Eddy

你要使用的sessionStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

當用戶點擊「X」：

sessionStorage.setItem('closed', 'true');

當重新加載頁面：

var data = sessionStorage.getItem('key'); 
if (data == 'true') { 
    // do nothing 
} else { 
    // display block 
}

來源

2017-06-27 13:51:40

謝謝@Lauren G！對不起，我的回覆遲到了。我會盡力在我的代碼中實現你的答案。 – Eddy

我認爲我做錯了什麼。 – Eddy

不用擔心！你現在看到了什麼？你知道你的js代碼設置和sessionStorage變量是否正在工作，或者你是否遇到任何特定的錯誤？ –

用按鈕刪除整個會話的消息？

回答

相關問題