How To Keep Modal Opened When password not inserted?-CodePudding

I'm new here. Can you help we with this problem? I need to keep this modal open after refresh if password is not inserted. While refreshing the page modal disapears. I know it's problem with the cookies I put, but L can't figure out how to make it to stay after refresh. How to say to modal that password not inserted, show again. Please help :)

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

CodePudding user response：

I edit snippet and change cookie part with a variable. As i can see from your code you set cookie before insert password, so the modal will not open to next refresh.

You need to change this code

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

to this:

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

Then if match password set cookie like:

$('.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!');
    }
});