Question

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

我不能让AnimatedModal.js在我的网站上工作，根据网站看起来似乎不对，似乎它不会褪色，我无法关闭弹出窗口，我跟着网页构建。有谁可以指出我的问题？

这是我跟随的website

Answer 1

您尚未包含此插件所需的相关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-->

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

Answer 2

尝试在animatedModal.js标记中加入</body>。

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

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

标记内的

<head>

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

Answer 3

关闭按钮的id必须与模式class匹配。

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

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

我不能使AnimatedModal.js关闭并淡化工作

3 个答案: