close modal using escape key using jquery

April 14, 2022

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 class="modalContent">
  <button class="modal-toggle">Click me!</button>
 </div>
 <div class="modal">
     <div class="modal-toggle"></div>
     <div class="wrap_model">   
       <div class="footer">
        <button class="">CONFIRM</button>
        <button class="">CANCEL</button>
       </div>
    </div>
</div>

>Solution :

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 class="modalContent">
  <button class="modal-toggle">Click me!</button>
</div>
<div class="modal">
  <div class="modal-toggle"></div>
  <div class="wrap_model">
    <div class="footer">
      <button class="">CONFIRM</button>
      <button class="">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 class="modalContent">
  <button class="modal-toggle">Click me!</button>
</div>
<div class="modal">
  <div class="modal-toggle"></div>
  <div class="wrap_model">
    <div class="footer">
      <button class="">CONFIRM</button>
      <button class="">CANCEL</button>
    </div>
  </div>
</div>