javascript - 弹出时为对话框添加自定义动画

Question

我想像这个 link 一样向我的对话框添加效果。

我在其他站点和 SO 中尝试了几个示例，但没有任何乐趣。我的对话框占据了整个浏览器的宽度和高度。

这是我点击打开对话框的按钮，模态HTML代码，一些与对话框相关的CSS样式和打开对话框的JS代码:

 // Get the modal
 var modal = document.getElementById('myModal');

 // Get the button that opens the modal
 var btn = document.getElementById("myBtn");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 // When the user clicks on the button, open the modal 
 btn.onclick = function() {
   modal.style.display = "block";
 }

 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
   modal.style.display = "none";
 }

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0px;
  top: 0px;
  width: 100%;
  /* Full width */
  height: 620px;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  overflow-y: hidden;
}
/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  /*margin: 15% auto;  15% from the top and centered */
  padding: 20px 40px 20px 40px;
  border: 1px solid #888;
  /*width: 80%;  Could be more or less, depending on screen size */
}

<div class="site-body">
  <h1>Click the Button to Open Modal</h1>
  <button id="myBtn" class="modal-btn">Open Modal</button>
</div>

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">x</span>
    <image class="logo" src="images/logo.png" />
    <div class="header">
      <div class="reference">
        <div class="row font-size1">
          <div class="label"><strong>OR Ref:</strong>
          </div>
          <div class="value"><strong>1-2-123456789</strong>
          </div>
        </div>
        <div class="row font-size1">
          <div class="label"><strong>CP Ref:</strong>
          </div>
          <div class="value"><strong>hID-prod123456</strong>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="row right-align">
          <div class="left-align label show-right-margin"><strong>Note Type: </strong>
          </div>
          <select class="left-align">
            <option>All Notes</option>
            <option>Any</option>
          </select>
          <button class="search-btn left-align">Search</button>
        </div>
      </div>
    </div>
    <div class="error">Sorry, We couldn't fetch all of the notes you asked for. Please try again or report an error if it continues to happen
    </div>
  </div>

在这个link中弹出对话框时如何添加动画？

Answer 1

JQuery 有一个相当直接的方法来显示/隐藏带有动画的元素。它与示例中的内容不完全相同，但相当接近，而且非常简单。

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  $('.modal').show('fast');
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  $('.modal').hide('fast');
}

您还可以尝试使用 JQuery slideDown() 和 slideUp() 函数(只需替换 show() 和 hide( ) 分别用这两个)。