使用jquery使用escape键关闭模式

Advi • 3 年前 • 1425 次点击

我有一个模式弹出窗口,按下键盘上的Esp键即可关闭。但是,如果我再次点击模式按钮,直到我刷新屏幕(每次点击ESP键后,我必须刷新屏幕才能显示模式),它才会出现。请帮助我哪里出了问题下面是我的代码。非常感谢。

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/131865

1425 次点击

文章 [ 4 ] | 最新文章 3 年前

• 1 楼

David 3 年前

您正在使用两种不同的方法来显示/隐藏模态。你可以这样展示:

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

但要像这样隐藏它:

$(".modal").hide()

那是两个 非常不同的事情 根据 the documentation :

这大致相当于打电话 .css( "display", "none" )

你基本上是在叠加两种不同的“隐藏”。莫代尔号仍然有 visible 同学们,你们刚刚改变了 display 不再出现。

如果你想使用 看得见的 同学们,要和那个方法保持一致。你可以用这个来隐藏它:

$(“.modal”)。toggleClass('visible')

不过,只需在页面上按ESC键,它也会重新显示可能不是你想要的。所以用这个更明确地隐藏它:

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

• 2 楼

Cédric 3 年前

这个 hide() JQuery方法不会更改可见性,而是更改显示规则。您必须在切换可见性或显示之间进行选择( show() 方法(使用JQuery)。

• 3 楼

Bradley Roberts 3 年前

对于点击事件,可以使用 $('.modal').toggleClass('visible'); ,但对于“转义”按钮单击,您正在使用。隐藏();

这个解决方案适合我:

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

注意:您还需要为“取消”按钮单击添加一个事件处理程序。

• 4 楼

jeremy-denis 3 年前

如果你想用 $(".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”>
<按钮类别=“”(>);确认</按钮>
<按钮类别=“”(>);取消</按钮>
</部门>
</部门>
</部门>

登录后回复