close modal using escape key using jquery-CodePudding

I have a modal popup that closes by pressing the Esp key on the keyboard. But again if I click on the button for modal it is not appearing until I refresh the screen ( I have to refresh the screen every time to appear the modal after hitting the ESP key). Please help me where I'm going wrong below is my code. Thank you

$(document).ready(function(){
        $('.modal-toggle').on('click', function(e) {
        e.preventDefault();
        $('.modal').toggleClass('visible');
      });     
    })

    $(document).keydown(function(e) {
      var code = e.keyCode || e.which;
      if (code == 27) $(".modal").hide();
    });

.modal{
    position: relative;
    z-index: 10000;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
 .wrap_model {
    position: absolute;
    z-index: 9999;
    top: 37px;
    left: 50%;
    margin-left: -256px;
    background-color: #fff;
    background: #fff;
    border-radius: 3px;
      border: 1px solid #eeeeee;
    height: 124px;
    width: 320px;
    text-align: center;}
    
.modal.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal.visible {
  transform: translateY(0);
  opacity: 1;
}   
.footer{
    position: absolute;
    top: 77%;
    left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div >
  <button >Click me!</button>
 </div>
 <div >
     <div ></div>
     <div >   
       <div >
        <button >CONFIRM</button>
        <button >CANCEL</button>
       </div>
    </div>
</div>

CodePudding user response：

if you want to use $(".modal").hide();you will have to :

call $(".modal").show(); on click on the button
start your modal with display:none instead of visibility: hidden

$(document).ready(function() {
  $('.modal-toggle').on('click', function(e) {
    e.preventDefault();
    $(".modal").show();
  });
})

$(document).keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == 27) $(".modal").hide();
});

.modal {
  position: relative;
  z-index: 10000;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.wrap_model {
  position: absolute;
  z-index: 9999;
  top: 37px;
  left: 50%;
  margin-left: -256px;
  background-color: #fff;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #eeeeee;
  height: 124px;
  width: 320px;
  text-align: center;
}

.modal.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal.visible {
  transform: translateY(0);
  opacity: 1;
}

.footer {
  position: absolute;
  top: 77%;
  left: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button >Click me!</button>
</div>
<div >
  <div ></div>
  <div >
    <div >
      <button >CONFIRM</button>
      <button >CANCEL</button>
    </div>
  </div>
</div>

or you can simply call toggle class instead of $(".modal").hide();

$(document).ready(function() {
  $('.modal-toggle').on('click', function(e) {
    e.preventDefault();
    $('.modal').toggleClass('visible');
  });
})

$(document).keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == 27) $('.modal').toggleClass('visible');
});

.modal {
  position: relative;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
}

.wrap_model {
  position: absolute;
  z-index: 9999;
  top: 37px;
  left: 50%;
  margin-left: -256px;
  background-color: #fff;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #eeeeee;
  height: 124px;
  width: 320px;
  text-align: center;
}

.modal.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal.visible {
  transform: translateY(0);
  opacity: 1;
}

.footer {
  position: absolute;
  top: 77%;
  left: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button >Click me!</button>
</div>
<div >
  <div ></div>
  <div >
    <div >
      <button >CONFIRM</button>
      <button >CANCEL</button>
    </div>
  </div>
</div>

CodePudding user response：

For the on click event, you use $('.modal').toggleClass('visible');, but for the on escape button click, you are using .hide();

This solution works for me:

<script>
    $(document).ready(function(){
        $('.modal-toggle').on('click', function(e) {
        e.preventDefault();
        $('.modal').toggleClass('visible');
      });     
    })

    $(document).keydown(function(e) {
      var code = e.keyCode || e.which;
      if (code == 27) $('.modal').toggleClass('visible');
    }); 
</script>

Note: You would need to add an event handler for your cancel button click too.

CodePudding user response：

The hide() JQuery method doesn't change the visibility but the display rule. You have to chose between toggle visibility or display (show() method with JQuery).

CodePudding user response：

You're using two different approaches to show/hide the modal. You show it like this:

$('.modal').toggleClass('visible')

But hide it like this:

$(".modal").hide()

Those are two very different things. According to the documentation:

This is roughly equivalent to calling .css( "display", "none" )

You're basically stacking two different kinds of "hiding". The modal still has the visible class, you've just changed its display to no longer be shown.

If you want to use the visible class, be consistent with that approach. You can hide it with this:

$('.modal').toggleClass('visible')

Though this would also re-show it by simply pressing ESC on the page, which probably isn't want you want. So hide it more explicitly with this:

$('.modal').removeClass('visible')