javascript - 使按钮关闭整个 session 的 div

标签 javascript jquery css

我有一些代码,当浏览器窗口调整为横向模式时会显示一条消息。这很好用,但现在我希望用户能够使用按钮关闭消息,并且用户只需要在整个 session 中执行一次。我想您为此需要 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;
}

最佳答案

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

现在每次检查

sessionStorage.getItem('isfirst'); 

这将在 session 中存储

关于javascript - 使按钮关闭整个 session 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44902835/

相关文章:

javascript - 有人可以解释 Angular as-for-in 表达式符号吗?

jquery - 将背景图像缩放到部分 - bootstrap

javascript - 淡入已更改的 div 背景图像

javascript - 如何在移动浏览器上禁用 Google 字体?

javascript - 转义符号 '<%=' 和 '%>'

javascript - 谷歌地图 JavaScript API "Uncaught Type Exception - undefined is not a function"

jquery - 使用 jQuery 获取 <div> 名称

css - 为什么 `height: 100%` 和绝对定位在 Flexbox 中不起作用?

javascript - 拉斐尔 JS : wrong position after scale path in IE

javascript - 如何删除从特定加载文件生成的所有事件监听器?