jeremy-denis的社区主页

如果你想用 $(".modal").hide(); 你必须:

呼叫 $(".modal").show(); 点击按钮
从 display:none 而不是 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>

或者您可以简单地调用toggle类,而不是 $(“.modal”)。隐藏();

$(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%;
}

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script>
<div class=“modalContent”>
<按钮class=“模态切换”>点击我</按钮>
</部门>
<div class=“modal”>
<div class=“模态切换”></部门>
<div class=“wrap_model”>
<div class=“footer”>
<按钮类别=“”(>);确认</按钮>
<按钮类别=“”(>);取消</按钮>
</部门>
</部门>
</部门>