javascript - 模态框打开有奇怪的效果

Question

所以我一直在研究一个在按钮点击时显示的模态框，模态是 opennig 很好，但是打开时它有一个奇怪的效果，似乎模态正在下降，而我只是想让他淡出中。

这就是我正在做的:

button_open.onclick = function() {
  $("#myModal").fadeIn(300);
}

AcceptAll.onclick = function() {
  $("#myModal").fadeOut(300);
}

这是一个JSFIDDLE

有人可以帮忙吗？

Answer 1

请更改您的 js 代码并从添加到您的 css 中的模态内容中删除动画效果

button_open.onclick = function() {
  $("#myModal").fadeIn(300);
}

AcceptAll.onclick = function() {
  $("#myModal").fadeOut(300);
}

<!--remove this line or comment from .modal-content in your css-->

  -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;