我无法使动画模态.js关闭和淡入淡出工作

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="/objecttest/directory/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
  <a id="demo01" href="#animatedModal">DEMO01</a>
  <div id="animatedModal">
  <div class="close-animatedModal"><span class="fa fa-close"></span></div>
  <div class="modal-content">
    <div class="thum">
    </div>
  </div>
  </div>
</body>
<script src="/objecttest/directory/js/animatedModal.min.js"></script>
<script>
$(document).ready(function() {
  //demo 01
  $("#demo01").animatedModal({
    animatedIn: 'zoomIn',
    animatedOut: 'bounceOut',
    color: '#39BEB9',
    beforeOpen: function() {
      var children = $(".thumb");
      var index = 0;
      function addClassNextChild() {
        if (index == children.length) return;
        children.eq(index++).show().velocity("transition.expandIn", {
          opacity: 1,
          stagger: 250
        });
        window.setTimeout(addClassNextChild, 200);
      }
      addClassNextChild();
    },
    afterClose: function() {
      $(".thumb").hide();
    }
  })
});
</script>
</html>

我无法使动画模态.js在我的网站上工作，不知何故，根据网站似乎不对，似乎它不会褪色，我无法关闭弹出窗口，我遵循了网络构建。谁能指出我的问题？

这是我关注的网站

您尚未包含此插件工作所需的相关CSS。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="/objecttest/directory/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"/>
<!--Add the above CSS link reference-->

这应该可以帮助您按预期工作。

关闭

按钮的id必须与模态class匹配。

这很重要！要关闭模态，类名必须与 ID 上给出的名称匹配 class="close-animatedModal"

因此，如果您的模态id例如modal1您的关闭按钮应该具有类close-modal1

尝试在</body>标签中包含animatedModal.js。

另外不要忘记包含css文件。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"> <head>标签内

最后，在脚本中加入一个debugger;。如果在 chrome 中执行没有暂停，则说明某些内容无法正常工作。

相关内容

最新更新

热门标签：