AnimatedModel - 多个模型框无法正常工作

Question

我正在尝试使用插件Animated Model

为多个内容运行多个模型灯箱

它适用于一个链接，但是当我尝试制作一个重复的框时它不起作用，我认为由于JS中定义的模型目标ID，这里有一个工作JSFiddle < / p>

有人可以建议我如何使用这个插件制作多个模型盒？

<a id="demo01" href="#animatedModal">DEMO01</a> 
<div id="animatedModal"> 
  <div class="close-animatedModal"> CLOSE MODAL </div>
  <div class="modal-content"> 
    modal content goes here
  </div>
</div>

Answer 1

请尝试以下代码： -

$("#demo02").animatedModal({
            modalTarget:'modal-02',
            animatedIn:'lightSpeedIn',
            animatedOut:'bounceOutDown',
            color:'#3498db'                
        });

Answer 2

首先，在你的小提琴中，2个元素具有相同的ID，这不应该发生，因为每个元素在文档中都应该有一个唯一的ID，你可以在这里看看我的小提琴 - {{3 }}

使用js

 //demo 01
  $("#demo01").animatedModal();

  //demo 02
  $("#demo02").animatedModal({
    modalTarget: 'animatedModal2'
  });