模态框打开有奇怪的效果

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;

Answer 2

你有一个CSS动画

我根据你的创建了一个 fiddle 来演示所需的更改

https://jsfiddle.net/n4gwuv2d/25/

/* Add Animation */
/*
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
*/

以及模态定义中的以下内容

/*animation-name: animatetop;*/

Answer 3

您可以添加类似于下面代码的对话框初始化效果。

$(function() {
  $("#myModal").dialog({
    autoOpen: false,
    show: {
      effect: "fadeIn",
      duration: 300
    },
    hide: {
      effect: "fadeIn",
      duration: 300
    }
  });

  $("#opener").on("click", function() {
    $("#myModal").dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="myModal" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>

有关详细信息，请转到 official site

模态框打开有奇怪的效果

Modal box open with strange effect

html

javascript

css

jquery

fadein