Question

我想在我的对话框中添加效果，如link。

我在其他网站上尝试了几个例子，但也没有，但没有快乐。我的对话框占用整个浏览器的宽度和高度。

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

＆＃13;

 // 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";
 }

＆＃13;

/* 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 */
}

＆＃13;

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

＆＃13;

如何在弹出按钮时向对话框添加动画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()）。

弹出

1 个答案: