为了账号安全,请及时绑定邮箱和手机立即绑定

为关闭模态窗口启用向下滑动动画

为关闭模态窗口启用向下滑动动画

慕工程0101907 2021-09-30 09:33:10
我使用 html、css 和 JavaScript 创建了一个模态,其代码包含在片段中。你会注意到当一个模态窗口打开时,它有一个从顶部滑动的动画。我想让模态窗口在关闭时具有滑动到底部的动画(而不是在其位置时立即消失)有人可以调整代码以达到预期的效果吗?提前致谢!let open_modals = [];(function() {  // Get the button that opens the modal  // read all the control of any type which has class as modal-button  var btn = document.querySelectorAll(".modal-button");  // All page modals  var modals = document.querySelectorAll('.modal');  // Get the <span> element that closes the modal  var spans = document.getElementsByClassName("close");  // When the user clicks the button, open the modal  for (var i = 0; i < btn.length; i++) {    btn[i].onclick = function(e) {      e.preventDefault();      modal = document.querySelector(e.target.getAttribute("href"));      modal.style.display = "block";      open_modals.push(modal.id);    }  }  // When the user clicks on <span> (x), close the modal  for (var i = 0; i < spans.length; i++) {    spans[i].onclick = function() {      for (var index in modals) {        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {          modals[index].style.display = "none";          open_modals.pop();        }      }    }}})();
查看完整描述

3 回答

  • 3 回答
  • 0 关注
  • 187 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信