Модальная коробка со странным эффектом

Question

Таким образом, я работал над модальным окном, которое показывает при нажатии кнопки, модальный режим прекрасно работает, но при открытии он имеет странный эффект, кажется, что модальный режим падает, в то время как я просто хочу, чтобы он исчез

Вот что я делаю:

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

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

Вот JSFIDDLE

Может кто-нибудь помочь, пожалуйста?

Answer 1

У вас есть 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 2

Вы можете добавить эффект при инициализации диалогового окна, как показано ниже.

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

Для получения дополнительной информации перейдите на официальный сайт

Answer 3

Пожалуйста, измените ваш 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;