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

我已经用您的小提琴来演示所需的更改

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

模态盒打开效果异常

3 个答案: