Question

我使用本教程为我的html页面创建了一个弹出模式框：

https://www.w3schools.com/howto/howto_css_modals.asp

我现在想通过cookies做的事情是记住当用户离开页面时是否显示或隐藏模态，并且当用户返回并且当用户离开页面时显示模态时，它应显示为显示。

这是模态弹出窗口的脚本代码：

<nav id="w1" class="navbar navbar-default">
    <div class="container">
        <div class="side_item">...a lot of html with login and cart...</div>
        <div class="navbar-header">...</div>
        <div id="w1-collapse" class="collapse navbar-collapse">
            <ul>...</ul>
        </div>
    </div>
</nav>

因此，当用户点击徽标时，会弹出模式，当用户点击其他任何位置时，它会消失。

现在我在这里尝试设置一个cookie来记住模态的状态，并在用户返回页面时相应地加载它：

    <script>

var modal = document.getElementById('myModal');
var btn = document.getElementById("logo");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}


span.onclick = function() {
    modal.style.display = "none";
}


window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

我不确定我是否正确行事。一直在网上搜索解决方案，但找不到任何东西。

还有一件事。如果在浏览器中禁用了javascript，我希望永久显示模式框。我该怎么做呢？

提前致谢。

Answer 1

不幸的是（有充分理由）此代码会抛出错误，因为代码段工具不允许设置COOKIE。

快速回顾：

1）创建openModal（）和closeModal（）来控制模态窗口 - 这样代码可以存在于一个地方，但是由不同的条件触发。这使得维护，前进更容易。

2）设置模态窗口的样式，就好像模态被设计为页面的一部分（没有JavaScript）。因此，当页面加载时，无论JS如何，模态都将出现。

3）我复制了W3C的COOKIE代码（在这里找到：https://www.w3schools.com/js/js_cookies.asp）来设置和获取COOKIE值。

4）我没有为$（document）.ready（）命令下载jQuery，而是创建了一个documentLoad（）函数，它会给你相同的结果。

var modal = document.getElementById('myModal');
var btn = document.getElementById("logo");
// target the modal element for it's close button
var span = modal.getElementsByClassName("close")[0];

function openModal(){
  modal.style.display = 'block';
  setCookie("modalDisplay", true, 365);
}
function closeModal(){
  modal.style.display = 'none';
  setCookie("modalDisplay", false, 365);
}

// Events to listen for from the HTML
span.addEventListener('click', function(){
  closeModal();
});
btn.addEventListener('click', function(){
  openModal();
});
window.addEventListener('click', function(event) {
  if (event.target == modal) {
      closeModal();
  }
});

// COOKIE code copied from W3C
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function documentLoad(){
  modalDisplay = getCookie( 'modalDisplay' );
  // if the modal has already been closed...
  if( !modalDisplay ){
    closeModal();
  }
}
// instead of jQuery's document.ready() this code is 
// calling a function on its own
documentLoad();

#myModal{
  display: block;
  padding: 35%;
  background-color: rgba( 0, 0, 0, 0.75 );
  color: white;
  position: fixed;
  top: 0;
  left: 0;
}

<button id="logo">Open Modal</button>

<div id="myModal">TEST MODAL <button class="close">X</button></div>

使用cookie保存模态框状态

1 个答案: