Question

我有一些代码，当浏览器窗口的大小设置为横向模式时会显示一条消息。这很好用，但现在我希望用户能够使用按钮关闭消息，并且用户只需要为整个会话执行一次此操作。我想你需要sessionStorage，但我不知道如何编写这个组合我现有的代码。任何帮助将不胜感激。

AN EXAMPLE HERE

        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">
        <button type="button" id="landscape-button">X</button>
        <p><span id="headertext">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>



#warning-message {
    display: none;
}

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

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

#warning-message {
    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;
}

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

p {
    font-size: 1.3em;
    color: #ffffff;
    positie: absolute;
    text-align: center;
    "><span style="margin: 0 0 0 25px;
    text-align: center;
    font-size: 1.5em;
    letter-spacing: -0.04em;
}

#headertext {
    margin: 0 0 0 25px;
    text-align: center;
    font-size: 2em;
    letter-spacing: -0.04em;
}

Answer 1

$('#warning-message').on('click',function(){
var data = sessionStorage.getItem('isfirst');
if(data == undefined)
{
sessionStorage.setItem('isfirst', 'true');
//close the pop
}
})

现在每次检查

sessionStorage.getItem('isfirst');

这将通过会话

进行存储

使按钮关闭整个会话的div

1 个答案: