未输入密码时如何保持模态打开？

Question

我是新来的。你能帮我们解决这个问题吗？如果未插入密码，我需要在刷新后保持此模式打开。刷新页面时模态消失。我知道我放的 cookie 有问题，但我不知道如何让它在刷新后保持不变。怎么说模态没有输入密码，再显示。请帮助:)

$(function() {
  $('.lev4o').modal({
    closable: false
  });
  let cookie = 0;
  if (cookie === 0) {
    $('.lev4o').modal('show');
    cookie = 1;
  }
});

$(document).ready(function() {

  // this prevents page reload on pressing enter
  $("form").submit(function(event) {
    event.preventDefault();
  });

  // click listener
  $('.fluid').click(function() {
    if ($('input:password').val() == "pass") {
      alert('Right Password!');
      $(".lev4o").modal('hide');
    } else {
      alert('Wrong Password!');
    }
  });

  // respond to enter key
  $('input:password').keyup(function(event) {
    if (event.keyCode == 13) {
      $('.fluid').click(); // trigger click
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="ui modal lev4o">
  <div class="ui middle aligned center aligned grid">
    <div class="login-eff">
      <div class="column">
        <h2 class="ui blue image header">
          <div class="content">
            Please enter the password !
          </div>
        </h2>
        <form class="ui form">
          <div class="ui  segment">
            <div class="field"></div>
            <div class="field">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" placeholder="Password">
              </div>
            </div>
            <div class="ui fluid large primary submit button">Login</div>
          </div>
      </div>
      </form>

Answer 1

我编辑代码段并使用变量更改 cookie 部分。正如我从您的代码中看到的那样，您在插入密码之前设置了 cookie，因此模式将不会打开以进行下一次刷新。

您需要更改此代码

if (!$.cookie('pop')) {
  $('.lev4o').modal('show');
  $.cookie('pop', '1'); 
}

对此：

if (!$.cookie('pop')) {
  $('.lev4o').modal('show');
}

然后如果匹配密码设置 cookie 如下：

$('.fluid').click(function() {
    if ($('input:password').val() == "pass") {
      alert('Right Password!');
      $.cookie('pop', '1'); // set cookie here because password match. next refresh cookie will prevent modal open
      $(".lev4o").modal('hide');
    } else {
      alert('Wrong Password!');
    }
});

未输入密码时如何保持模态打开？

How To Keep Modal Opened When password not inserted?

html

javascript

passwords

jquery

password-protection