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