Question

我正在使用以下代码在移动设备（智能手机或平板电脑）处于纵向模式时显示消息。这很好用！

但是，我需要一些代码，当用户点击X按钮时，只要在该会话中访问该网站的任何页面，该消息就不再出现。

但如果网站关闭;在下次访问时，当以纵向模式查看网站时，该信息应再次出现。

如何做到这一点？

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 1

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

当用户点击＆＃34; X＆＃34;：

时

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

重新加载页面时：

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

Answer 2

以下是有效的，考虑到会话存储仅在单击“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();
});

使用按钮删除整个会话的消息？

2 个答案: