18910140161

JavaScript-如何在未插入密码时保持模式打开?-堆栈溢出

顺晟科技

2022-10-18 13:57:37

190

我是新来的你能帮我们解决这个问题吗?如果未插入密码,我需要在刷新后保持此模式打开。刷新页面时,模式消失。我知道我放的饼干有问题,但我不知道如何让它在刷新后保持不变。怎么对模特说密码没插进去,又显示了。请帮助:)

$(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类=“ UI模式lev4o ”>;<;DIV类=“ UI中间对齐居中对齐网格”>;<;DIV类=“ login-eff ”>;<;DIV类=“列”>;<;H2类=“ UI蓝色图像标题”>;<;DIV类=“内容”>;请输入密码!<;/DIV>;<;/H2>;<;表单类=“ UI表单”>;<;DIV类=“ UI段”>;<;DIV类=“字段”>;<;/DIV>;<;DIV类=“字段”>;<;DIV类=“ UI左侧图标输入”>;<;I CLASS=“锁定图标”>;<;/I>;<;INPUT type=“ password ” name=“ password ” placeholder=“密码”>;<;/DIV>;<;/DIV>;<;DIV CLASS=“ UI流体大型主要提交按钮”>;登录<;/DIV>;<;/DIV>;<;/DIV>;<;/窗体>;


顺晟科技:

我用一个变量编辑代码片段并更改cookie部分。正如我从你的代码中看到的,你在插入密码之前设置了cookie,所以模式不会打开到下一次刷新。

您需要更改此代码

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

对此:

if (!$.cookie('pop')) {
  $('.lev4o').modal('show');
  $.cookie('pop', '1'); 
}
如果匹配密码

,则将cookie设置为:

if (!$.cookie('pop')) {
  $('.lev4o').modal('show');
}
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航